Столбец начальной загрузки перемещается в новую строку

#html #css #twitter-bootstrap #twitter-bootstrap-3

#HTML #css #twitter-bootstrap #twitter-bootstrap-3

Вопрос:

Я использую Bootstrap3 и использую складной элемент в своем дизайне.

Я использую столбец 12 внутри строки следующим образом

 <!-- Search Filter -->
<div id="search-filter">
  <div class="container">
    <div class="row">
      <div class="col-md-5 col-xs-12">

        <!-- Collapse Search -->
        <button type="button" class="navbar-toggle navbar-toggle-search-filter" data-toggle="collapse" data-target="#searchbar-collapse-set"> <span class="sr-only">Toggle navigation</span> <span class="glyphicon glyphicon-chevron-down"></span> </button>
        <!-- /Collapse Search -->

        <h3>Showing 345 Results <small>(Hill Stations around Bangalore)</small></h3>

      </div>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="searchbar-collapse-set">

        <div class="col-md-4 col-xs-12">
          <div class="distance">
            <h5>distance:</h5>
            <div id="distance-slider"></div>
            <span class="distance-value">250 kms</span>
          </div>
        </div>

        <div class="col-md-3 col-xs-12">
          <div class="sort">
            <h5>sort:</h5>
            <ul class="nav nav-pills">
              <li class="active"><a href="#">popular</a></li>
              <li><a href="#">name</a></li>
              <li><a href="#">distance</a></li>
            </ul>
          </div>
        </div>

      </div>
      <!-- /.navbar-collapse -->

      <div class="clearfix"></div>

    </div>
  </div>
</div>
<!-- /Search Filter -->

введите описание изображения здесь

Из-за сворачиваемого элемента i третий столбец перемещается в следующую строку.

Я удалил заполнение NavCollapse до 0, и содержимое исчезает из раскрывающегося списка, как показано ниже.

введите описание изображения здесь

Добавив следующий код, он возвращается на место, как показано ниже.

введите описание изображения здесь

Но это нарушает полноэкранный режим, как показано ниже.

введите описание изображения здесь

Ссылка на Nomad

1. Есть ли какая-либо причина, по которой вы не можете удалить заполнение с помощью медиа-запроса?

2. @joshhunt ahhhhh:( ужасное время для кода — это когда ты устал 🙁

3. @joshhunt большое спасибо, ты спас мои мозговые клетки: D

4. Ха-ха, не беспокойтесь, я дам быстрый ответ на ваше рассмотрение.

Ответ №1:

Я предлагаю использовать медиа-запрос, такой как

 @media (min-width: 1200px) { ... }

так что вы можете добавить отступы на дисплей рабочего стола, не влияя на отображение на небольших устройствах.