Question

This is how it is coming right now, notice the black gap, plus the navbar-brand and navbar form seem to be coliding 我对bootstrap很新。我试图在导航栏品牌旁边的导航栏中使用内联表单。在重新调整窗口大小（响应性）的同时，窗体位于导航栏品牌链接下方，但它并非100％，因此看起来很尴尬。谁能告诉我哪里出错了？这是完整的HTML代码， This is how i want, on resizing, no gap should come, plus the navbar brand should not overlap the form. Bootstrap 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>

Answer 1

Bootply ：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;

    }

}

如何设置内联表单在“navbar”中的navbar品牌下占据100％宽度

1 个答案: