html - 引导列转移到新行

我在设计中使用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 Link

最佳答案

我的建议是使用媒体查询，例如

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

因此您可以在桌面显示器上添加填充，而不会影响较小设备上的显示。

关于html - 引导列转移到新行，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24439227/