Problem z skalowalnością Bootstrapa

pytanie zadane 24 lipca 2015 w HTML i CSS przez bart29 Początkujący (300 p.)
edycja 24 lipca 2015 przez bart29

Hej, piszę w stronie z wykorzystaniem bibliotek bootstrap i mam pewien problem, żeby przystosować element do mniejszych ekranów nie wiem czy to ze względu na późną porę czy dlaczego ;).

Kod:

<div class="container centmid">
<div class="row">
  <div class="col-sm-6 col-lg-4 off-marg"><i class="icon-dollar"></i><br /><br /><p>1</p></div>
  <div class="col-sm-6 col-lg-4 off-marg"><i class="icon-chat"></i><br /><br /><p>2</p></div>
  <div class="col-sm-6 col-lg-4 off-marg"><i class="icon-paper-plane-empty"></i><br /><br /><p>3</p></div>
</div>
<div class="row">
  <div class="col-sm-6 col-lg-4 off-marg"><i class="icon-cw"></i><br /><br /><p>4</p></div>
  <div class="col-sm-6 col-lg-4 off-marg"><i class="icon-paper-plane"></i><br /><br /><p>5</p></div>
  <div class="col-sm-6 col-lg-4 off-marg"><i class="icon-publish"></i><br /><br /><p>6</p></div>
</div>
</div>

Mianowicie chce mieć 2 razy 3 kolumny na large desktops i 3 razy 2 kolumny na mniejszych, nie wiem jak to zgrać. Teraz wygląda to tak, że na lg jest dobrze, natomiast na mniejszych wyswietlaczach mamy jeden rząd dwie kolumny, dwa rzędy po jednej i w ostatnim rzędzie dwie kolumny. Jakieś pomysły ? :)

Pozdrawiam!

3 odpowiedzi

odpowiedź 24 lipca 2015 przez Comandeer Guru (607,330 p.)
wybrane 24 lipca 2015 przez bart29

Najlepsza

Jak chcesz z 2 wierszy nagle zrobić 3? Musiałbyś mieć 3 wiersze, z czego jeden pokazywany tylko na małych ekranach (BS ma przecież klasy od tego).

komentarz 24 lipca 2015 przez bart29 Początkujący (300 p.)

Dzięki za odpowiedź,

mam do umieszczenia 6 elementów, chcę mieć dwa wiersze 3 elementowe na dużych i trzy wiersze 2 elementowe na małych :) W jaki sposób zrobić to co napisałeś, jak pokazać ten wiersz tylko na małych ekranach ?

komentarz 24 lipca 2015 przez Comandeer Guru (607,330 p.)

Pokombinowałbym z tymi klasami: http://getbootstrap.com/css/#responsive-utilities

odpowiedź 24 lipca 2015 przez Czort Nałogowiec (32,500 p.)

Ja tam się nie znam ale jak usunąłem klasy row to na mniejszym wyświetlaczu są trzy rzędy po dwie kolumny. Czyli pewnie gdzieś w klasie row tkwi błąd.

komentarz 24 lipca 2015 przez Comandeer Guru (607,330 p.)

.row ustala w BS wiersz grida, więc raczej nie tutaj jest błąd

odpowiedź 25 lipca 2015 przez bart29 Początkujący (300 p.)
przywrócone 25 lipca 2015 przez bart29

Ciąg dalszy mojej zabawy z BS i mam kolejny problem ..

<nav class="navbar navbar-mine navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <i class="icon-menu"></i>
      </button>
      <a href="#"><img style="img-responsive" src="img/logo.png" width="30%" height="auto" /></a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right ">
        <li><a href="#">O NAS</a></li>
        <li><a href="#">CO OFERUJĘ</a></li>
        <li><a href="#">PORTFOLIO</a></li>
        <li><a href="#">PROCES ZAKUPU</a></li>
        <li><a href="#">KONTAKT</a></li>
      </ul>
    </div>
  </div>
</nav>

Jest to nawigacja przyklejana do górnej belki, natomiast rzecz w tym że nie mam pojęcia jak ruszyć kolor odnośników, probowałem zmieniać atrybut color, text-decoration na none we wszystkich klasach, po za tym klasa 'navbar-mine' jest moja, ustawienie w niej koloru też nic nie daje. Może ktoś budował nawigację w BS i podzieli się ze mną ?