Реактивные столбцы Слишком скоро

Я использую Bootstrap 3, и я хочу, чтобы 3 столбца оставались отзывчивыми во всех разных размерах (lg -> xs). Я пытаюсь использовать сетку с col-xx-4 для каждого размера, но как только я доберусь до < 992px, столбец начнет рушиться друг на друга.Реактивные столбцы Слишком скоро

пример может быть видеть here

Я хочу красный, зеленый и синий столбцы в сером поле, чтобы быть всегда равна 3 колонки. Возможно, в xs они могут рухнуть, но, по крайней мере, до 768px viewport они должны быть 3 столбца рядом друг с другом.

Я использовал col-xs-4, который должен постоянно держать вещи в горизонтальном положении.

выдержка некоторых из моего кода:

   <div class="dash-bg"> 
        <div class="" style="background: #d5d5d5; height: 500px;"> 
        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4" style="background: red; height: 30px;"> 
        </div> 
        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4" style="background: blue; height: 30px;"> 
        </div> 
        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4" style="background: green; height: 30px;"> 
        </div>       
        </div> 
       </div>

источник

2013-12-01 vs-works

Похоже, вам нужно использовать media query или сделать свой dash-bg {min-width:993px;}

источник

2013-12-01 13:25:47 DevlshOne

Ну, вы должны добавить класс "Row" в заголовок ..

Фрагмент кода здесь:

<div class="header row"> 
    <div class="logo pull-left" style="background:black;"> 
    </div> 
    <div class="pull-right" style="margin-top: 6.2%;"> 
     <ul class="nav nav-pills"> 
      <li><a href="#">COMPANY<span class="arrow-down glyphicon glyphicon-play"></span></a></li> 
      <li><a href="#">FAQ</a></li> 
     </ul> 
    </div> 
    <!-- 
    <div class="navbar-header dropdown"> 
     <button class="navbar-toggle" data-target=".navbar-collapse" data-toggle="dropdown" type="button">    
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span>   
      </button> 
     <a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html"></a> 
    </div> 
    --> 
</div>

Определение элемента DOM строка будет следить за тем, чтобы максимальная высота любого дочернего элемента DOM была максимальной высотой родительского DOM.

источник

2013-12-01 13:29:26

-Rahul- Это сделали это! Я не понимаю, почему это произошло. Я не понимаю, почему высота была проблемой, когда ширина вызывала у меня все проблемы. Большое вам спасибо за вашу помощь. –

Рад, что это решило проблему. Убедитесь, что вы всегда определяете строку, когда хотите, чтобы этот регион отличался от других (например, заголовки, нижние колонтитулы, контейнеры) ... Регион может перекрываться с другим областью свойства float, указывается на элементе в первом регион (вытяните-право в вашем случае). Пожалуйста, отметьте его как ответ или верхний, чтобы он был полезен другим :-) С уважением, Рахул –

-1

У меня есть что-то подобное, и я использую

<div class="row"> 
     <div class="col-md-4">Something</div> 
     <div class="col-md-4">Something</div> 
     <div class="col-md-4">Something</div> 
</div>

Вы можете проверить пример here

источник

2013-12-01 13:29:44 Nibbler

Реактивные столбцы Слишком скоро

ответ

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