Question

我有一个非常简单的Twitter Bootstrap导航栏，由导航栏品牌组成，后面跟一个合理的按钮填充剩余的导航栏宽度。不幸的是，在一些狭窄的屏幕（例如一些电话和浏览器）上，它不必要地将按钮包裹到第二行导航栏，同时将品牌留在第一行。没有必要 - 按钮应该自动收缩以填充剩余的空间，并且在视觉上有足够的。

任何想法如何强迫品牌和按钮保持在一行导航栏并填充整个宽度？代码如下。

非常感谢。

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation" id="topnavdiv">
  <div class="container-fluid" id="navcontainer">
    <div class="navbar-header" id="navbarheader">
        <a class="navbar-brand" href="#" id="navbarbrand">
            <img src="img/logo.png">
        </a>
    </div>
    <div id="mainnavbar">
        <ul class="nav nav-justified" id="navbuttondiv">
            <li><a href="#" id="navbutton" style="padding-bottom: 15px !important; padding-top: 15px !important;">
                <i class="fa fa-bars fa-lg" style="color: #fff;"></i></a></li>
        </ul>
        <form class="navbar-form navbar-left form-inline nav-justified" style="display: none;"> 
        </form> <!-- Used during a different UI mode but not displayed when the above navbuttondiv is visible -->
        <form class="navbar-form navbar-right form-inline" style="display: none;">
        </form> <!-- Used during a different UI mode but not displayed when the above navbuttondiv is visible-->
    </div>
  </div>
</div>

Answer 1

表单横向和表单组可能会有所帮助。我将能够适应您的代码并稍后进行测试，但我希望尽快回复。下面是使用这些类的示例代码。

<form class="form-horizontal" role="form">
    <div class="form-group">
        <label for="firstname" class="col-sm-2 control-label">First Name</label>                        
        <div class="col-sm-10">
            <input type="text" class="form-control" id="firstname" name="firstname" placeholder="Enter First Name">
        </div>
    </div>
    <div class="form-group">
        <label for="lastname" class="col-sm-2 control-label">Last Name</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="lastname" name="lastname" placeholder="Enter Last Name">
        </div>
    </div>
</form>

Bootstrap导航栏品牌+对齐按钮，没有包裹在狭窄的屏幕上？

1 个答案: