Question

有没有办法可以阻止“使用twitter登录”按钮在xs分辨率下折叠而无需重新编译 bootstrap.css？也许在“previous”和“next”按钮的同一个navbar div中保持“登录”按钮，但是使用javascript或其他一些css hack从上面的“搜索”按钮复制x坐标...？

编辑：这是小提琴：http://jsfiddle.net/43Lcy/

以下是代码：

      <div class="navbar-form navbar-left">
        <div class="btn-group btn-group-sm left-offset">
          <button type="button" class="btn btn-default">Previous</button>
          <button type="button" class="btn btn-default">Next</button>
        </div>
      </div>

      <div style="margin-right: 10px; float:right;" class="navbar-form navbar-right">
          <img class="left-offset" height="29px" width="29px" style="margin-top:1px;" src="./images/avatar.png" />
          <button type="button" class="btn btn-default btn-sm">Sign in with Twitter</button>
      </div>

现在看来它是这样的。

a busy cat http://www.dodaj.rs/f/N/N3/V084DII/skrin.jpg

Answer 1

你创建的小提琴是使用BS 2，但看起来你想要使用版本3，所以我做了这个Bootply：http://bootply.com/106036

我会删除覆盖Bootstrap CSS的内联样式，并在navbar-header中放置您不想折叠的内容......

<nav class="navbar navbar-default" role="navigation">  
    <div class="navbar-header">

      <a class="navbar-brand" href="#">Brand</a>

      <ul class="nav navbar-nav">
        <li></li>
        <li><a href="#">Link 1</a></li>
      </ul>

      <div class="col-sm-5">
        <form class="navbar-form pull-left">
          <div class="form-group" style="display:inline;">
            <div class="input-group">
              <input type="text" class="form-control">
              <span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
            </div>
          </div>
        </form>
      </div>

      <div class="pull-right">
      <button type="button" class="navbar-btn btn btn-default">Sign in with Twitter</button>&nbsp;&nbsp;
      </div>

      <div class="col-sm-3">
        <button type="button" class="navbar-btn btn btn-default">Prev</button>
        <button type="button" class="navbar-btn btn btn-default">Next</button>
      </div>

    </div>
</nav>

防止xs仅针对一项导航栏崩溃 - Bootstrap 3

1 个答案:

http://bootply.com/106036