css - Bootstrap : prevent default mobile collapsing

Question

如何阻止某些默认的移动功能？ (参见 Bootstrap - Creating a mobile nav that doesn't use collapse)

特别是，我想获得两行导航栏:

• 第一个带有 Logo 和页面标题；
• 第二个带有将切换侧边栏的东西，搜索框填充其余空间。

我第一次尝试时忽略了导航栏并构建了我自己的布局，但在再次放弃之前我想我会检查一下社区。主要问题是搜索框坚持 100% 宽度(在小屏幕上)。

使用 Chrome devtools，我可以在 .form-control 中关闭 width:100% 但我似乎无法让 .form-group 收缩

<div class="navbar navbar-default navbar-static-top" ng-controller="NavbarCtrl">
  <div class="container">
    <div class="navbar-header">
      <a href="/" class="navbar-brand">af</a>
    </div>
    <div id="navbar-main">
      {{page.title}}
    </div>
  </div>

  <div class="container">
    <div class="navbar-left">
      <ul class="nav navbar-nav">
        <li><a href="" data-toggle="offcanvas">Crieria</a></li>
      </ul>
    </div>
    <div id="navbar-search" class="navbar-right">
     <form class="navbar-form " role="search">
        <div class="form-group">
          <input type="text" size="20" class="form-control" placeholder="Search">
          <!-- <button type="submit" class="btn btn-default">Submit</button> -->
        </div>
      </form>
    </div>
  </div>
</div>

Answer 1

试试这个:

如果您需要在 md 和 lg View 中使用全宽，请使用 container-fluid 而不是 container

DEMO

 <div class="navbar navbar-default navbar-static-top" ng-controller="NavbarCtrl">
            <div class="container">
                <div class="navbar-header col-xs-6 col-sm-6 col-md-6 col-lg-6">
                    <a href="/" class="navbar-brand">af</a>
                </div>
                <div id="navbar-main col-xs-6 col-sm-6 col-md-6 col-lg-6">
                    {{page.title}}
                </div>
            </div>

            <div class="container">
                <div class="navbar-left col-xs-4 col-sm-4 col-md-2 col-lg-2">
                    <ul class="nav navbar-nav">
                        <li><a href="" data-toggle>Crieria</a></li>
                    </ul>
                </div>
                <div id="navbar-search" class="navbar-right col-xs-8 col-sm-8 col-md-10 col-lg-10">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Search">
                        <!-- <button type="submit" class="btn btn-default">Submit</button> -->
                    </div>
                </div>
            </div>
        </div>