如何在“导航栏”中设置导航栏品牌下的内联表单占据100％宽度答案

【问题标题】：How to set a inline form to occupy 100% width under the navbar brand in "navbar"如何在“导航栏”中设置导航栏品牌下的内联表单占据100％宽度
【发布时间】：2014-04-14 20:28:59
【问题描述】：

我对引导程序很陌生。我试图在导航栏品牌旁边的导航栏中有一个内联表单。在重新调整窗口大小（响应能力）时，表单位于导航栏品牌链接下方，但它并没有达到 100%，因此看起来很尴尬。谁能告诉我哪里出错了。这是完整的html代码，引导 101 模板

    <!-- Bootstrap -->
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">

  </head>
  <body>
    <div class = "navbar navbar-inverse navbar-fixed-top"><!--style = "background-image: url('Images/logo.png'); background-size: contain; background-repeat: repeat;"-->
        <div class = "row">
            <div class = "navbar-header col-lg-4 col-sm-12 col-xs-12 pull-left" style = "background-color: red; height: 100%;">
                 <a class = "navbar-brand" href = "#">JanaSena Party</a>
                 <button class = "navbar-toggle pull-right" data-toggle = "collapse" data-target = ".navHeaderCollapse">JSP</button>
            </div>
            <div class = "collapse navbar-collapse navHeaderCollapse col-lg-8 col-xs-12 pull-right" style = "background-color: green;">
                <form class="navbar-form" role = "form" style = "margin: 0; width: 100%; background-color: blue;">
                    <div class="form-group">
                        <label class="control-label">Username</label>
                        <input type="text" class="form-control" placeholder="Enter Username">
                    </div>
                    <div class="form-group">
                        <label class="control-label">Password</label>
                        <input type="password" class="form-control" placeholder="Password">
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox"> Remember me
                        </label>
                    </div>
                    <button type="submit" class="btn btn-default navbar-btn">Sign in</button>
                </form>
            </div>
        </div>
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="bootstrap/js/bootstrap.min.js"></script>
  </body>
</html>

【问题讨论】：

标签： jquery html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

引导层：http://www.bootply.com/129779

CSS：

.navbar-header{
   float:none;    
  }

  .navHeaderCollapse{
     width:100%;      
    }

HTML：

 <div class="navbar navbar-inverse navbar-fixed-top"><!--style = "background-image: url('Images/logo.png'); background-size: contain; background-repeat: repeat;"-->
        <div class="row">
            <div class="navbar-header col-lg-4 col-sm-12 col-xs-12" style="background-color: red; height: 100%;">
                 <a class="navbar-brand" href="#">JanaSena Party</a>
                 <button class="navbar-toggle pull-right" data-toggle="collapse" data-target=".navHeaderCollapse">JSP</button>
            </div>
            <div class="collapse navbar-collapse navHeaderCollapse col-lg-8 col-xs-12" style="background-color: green;">
                <form class="navbar-form" role="form" style="margin: 0; width: 100%; background-color: blue;">
                    <div class="form-group">
                        <label class="control-label">Username</label>
                        <input type="text" class="form-control" placeholder="Enter Username">
                    </div>
                    <div class="form-group">
                        <label class="control-label">Password</label>
                        <input type="password" class="form-control" placeholder="Password">
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox"> Remember me
                        </label>
                    </div>
                    <button type="submit" class="btn btn-default navbar-btn">Sign in</button>
                </form>
            </div>
        </div>
    </div>

更新：

bootply：http://www.bootply.com/129807

css：

@media screen and (max-width:992px){

.navbar-header{
   float:none; 

  }

  .navHeaderCollapse{
     width:100%;
    float:left;

    }

}

【讨论】：

谢谢，实际上，表格现在与品牌重叠，另外我想要导航栏品牌下方的表格，只有中到超小，大我希望它在品牌旁边。
我看到了更新，但仍然不符合我的要求。我已经用图像更新了我的问题，所以它更清楚。你能看一下吗。谢谢。