Jquery 如何设置内联表单，使其在“中”的navbar品牌下占据100%的宽度；导航栏“；_Jquery_Html_Css_Twitter Bootstrap_Twitter Bootstrap 3

Jquery 如何设置内联表单，使其在“中”的navbar品牌下占据100%的宽度；导航栏“；

jquery html css twitter-bootstrap twitter-bootstrap-3

Jquery 如何设置内联表单，使其在“中”的navbar品牌下占据100%的宽度；导航栏“；,jquery,html,css,twitter-bootstrap,twitter-bootstrap-3,Jquery,Html,Css,Twitter Bootstrap,Twitter Bootstrap 3,我是个新手。我试图在navbar品牌旁边的navbar中有一个内联表单。在重新调整窗口大小（响应性）时，表单位于navbar品牌链接下方，但它不是100%，因此看起来很尴尬。谁能告诉我哪里出了问题。这是完整的html代码，引导101模板  <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"> </head> <body&

我是个新手。我试图在navbar品牌旁边的navbar中有一个内联表单。在重新调整窗口大小（响应性）时，表单位于navbar品牌链接下方，但它不是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>


JSP
用户名
密码
记得我吗
登录

启动

.navbar-header{ float:none; } .navHeaderCollapse{ width:100%; }
CSS：

.navbar-header{ float:none; } .navHeaderCollapse{ width:100%; }
HTML：

<div class="navbar navbar-inverse navbar-fixed-top"> <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>

@media screen and (max-width:992px){ .navbar-header{ float:none; } .navHeaderCollapse{ width:100%; float:left; } }

谢谢，事实上，表单现在与品牌重叠，加上我希望表单位于navbar品牌下方，只有中到xtra小的，大的我希望它位于品牌旁边。我看到了更新，但它仍然不符合我的要求。我用图片更新了我的问题，使它更清晰。你能看一下吗。谢谢