Создание реагирующие дивы в загрузчике

Я экспериментировал с начальной загрузки, и это код, который я написал:Создание реагирующие дивы в загрузчике

<!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>

Выход, как показано на скриншоте:
Но когда я конвертировать в мобильный экран , Я получаю вот так:

Я хочу, чтобы divs отображались в центре с одним над одним на мобильных экранах. Как мне это сделать? Но он не реагирует.

источник

2015-03-13 Ajay Kulkarni

использовать col-md-8, col-sm-8 вместе с col-lg – Patrick

Вы пытались сменить дисплей на блок, а не на встроенный блок? Я не готов к jsfiddle прямо сейчас –

вы можете использовать col-xs-12 в вашем Div, добавьте это к каждому DIV и он будет работать, как вы ожидаете, что

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>

Подробнее о загрузчике grid option

источник

2015-03-13 14:14:09

You может определять несколько ширины для размеров экрана:

col-lg: большой экран

col-md: средний экран

col-xs: маленький экран

В вашем примере:

<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>

источник

2015-03-13 14:23:40 maX

Что вы сделали с ним, для меня, не Плохо.
вам просто нужно изменить CSS следующим образом:

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

Когда вы хотели бы сделать меньше, просто уменьшить 8 до 7 или 6, и все это делается ответно. Использование col-lg верно для большого экрана, и это не заставило бы его использовать его для мобильных характеристик.

источник

2015-03-13 14:31:08

Создание реагирующие дивы в загрузчике

ответ

Смежные вопросы