Tworzenie reagujących DIV w bootstrap

Ja eksperymentuje z bootstrap i jest to kod, który napisałem:Tworzenie reagujących DIV w bootstrap

<!doctype html> 
<html lang="en"> 
    <head> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="stylesheet" href="./css/bootstrap.min.css"> 
     <link rel="stylesheet" href="./css/bootstrap-theme.min.css"> 
     <style type="text/css"> 
      .row-centered { 
       text-align:center; 
      } 
      .col-centered { 
       display:inline-block; 
       float:none; 
       text-align:left; 
       margin-right:-4px; 
      } 
      .pos{ 
       position: relative; 
       top: 240px; 
      } 
     </style> 
    </head> 
    <body> 
     <div class="container"> 
      <div class="row row-centered pos"> 
       <div class="col-lg-8 col-centered"> 
        <div class="well"></div> 
       </div> 
       <div class="col-lg-8 col-centered"> 
        <div class="well"></div> 
       </div> 
       <div class="col-lg-8 col-centered"> 
        <div class="well"></div> 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

Wyjście jest jak pokazano na zrzucie ekranu:
Ale kiedy przekonwertować na ekranie telefonu , Otrzymuję w ten sposób:

Chcę, aby divy pojawiły się w centrum z jednym powyżej na ekranach mobilnych, jak również. Jak mogę to zrobić? Ale nie reaguje.

Źródło

2015-03-13 Ajay Kulkarni

użyć col-md-8, col-sm-8 razem z col-lg – Patrick

czy próbowałeś zmienić wyświetlacz na blok, a nie wbudowany blok? W tej chwili nie jestem gotowy na jsfiddle –

można użyć col-xs-12 w swoim div, dodać do każdego div i będzie działać jak można oczekiwać, że

LIVE DEMO

<body> 
     <div class="container"> 
      <div class="row row-centered pos"> 
       <div class="col-lg-8 col-xs-12 col-centered"> 
        <div class="well"></div> 
       </div> 
       <div class="col-lg-8 col-xs-12 col-centered"> 
        <div class="well"></div> 
       </div> 
       <div class="col-lg-8 col-xs-12 col-centered"> 
        <div class="well"></div> 
       </div> 
      </div> 
     </div> 
    </body>

Więcej o bootstrap grid option

Źródło

2015-03-13 14:14:09

You może definiować wiele szerokości dla rozmiarów ekranu:

col-lg: duży ekran

col-md: środkowy ekran

col-xs: mały ekran

W przykładzie:

<div class="container"> 
    <div class="row row-centered pos"> 
     <div class="col-lg-8 col-xs-12 col-centered"> 
      <div class="well"></div> 
     </div> 
     <div class="col-lg-8 col-xs-12 col-centered"> 
      <div class="well"></div> 
     </div> 
     <div class="col-lg-8 col-xs-12 col-centered"> 
      <div class="well"></div> 
     </div> 
    </div> 
</div>

Źródło

2015-03-13 14:23:40 maX

Co zrobiliście z niego, jak dla mnie, nie jest zły.
wystarczy zmodyfikować CSS, co następuje:

.row-centered { 
     text-align:center; 
     margin:0 auto; 
    } 
    .col-centered { 
     display:block; 
     float:none; 
    } 
    .pos { 
     position: relative; 
     top: 240px; 
    }

Kiedy chcesz, aby go zmniejszyć, tylko zmniejszyć 8 do 7 lub 6 i to wszystko zrobić responsywność. Używanie col-lg jest prawdziwe w przypadku dużych ekranów i nie utknąłoby, wykorzystując je do pracy mobilnej.

Źródło

2015-03-13 14:31:08

Tworzenie reagujących DIV w bootstrap

Odpowiedz

Powiązane problemy