导航栏

Question

我最近开始使用bootstrap，所以我还在学习。我的问题出在我创建的导航栏上。我将所有内容拉到正确但搜索栏和标签正在破线。我尝试了一些设置，例如将断点设置为xs等等。

这就是它的样子。

enter image description here

＆＃13;

＆＃13;

<div class="container-fluid">
                    <div class="row-fluid">
    					</div>
                        <div class="row-xs pull-right" >
    						<div class="col-xs">
      							<ul class="nav navbar-nav">
        						<li class="active"><a href="#">Home</a></li>
        						<li><a href="#">Page 1</a></li>
        						<li><a href="#">Page 2</a></li> 
        						<li><a href="#">Page 3</a></li> 
      							</ul>
    						</div>
                            <div class"col-xs">
                            	<form class="navbar-form " role="search">
        						<div class="form-group">
          						<input type="text" class="form-control" placeholder="Search"></div>
        						<button type="submit" class="btn btn-default">Submit</button>
      							</form>
                                      
                      </div>
                            
                            
 						 </div>
					</nav>
			</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

你的HTML遗漏了很多元素row-xs，col-xs，而row-fluid不是Bootstrap3中的类，你也有一些语法错误。

我建议先从标准的navbar类开始，然后从那里进行自定义，但如果您有或想要使用列和行，请在正确的方法中查看Docs以便使用这些。

在代码段中查看navbar的工作示例和代码的变体。

＆＃13;

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>

      </button>
    </div>
    <div class="collapse navbar-collapse" id="bs-nav">
      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="#">Home</a>

        </li>
        <li><a href="#">Page 1</a>

        </li>
        <li><a href="#">Page 2</a>

        </li>
        <li><a href="#">Page 3</a>

        </li>
      </ul>
      <form class="navbar-form navbar-right" role="search">
        <div class="form-group">
          <div class="input-group">
            <input type="text" class="form-control" placeholder="Search for..."> <span class="input-group-btn">
        <button class="btn btn-default" type="button">Search</button>
      </span>

          </div>
        </div>
      </form>
    </div>
  </div>
</nav>
<hr>
<div class="container-fluid">
  <div class="row">

    <div class="col-xs-12">
      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="#">Home</a>

        </li>
        <li><a href="#">Page 1</a>

        </li>
        <li><a href="#">Page 2</a>

        </li>
        <li><a href="#">Page 3</a>

        </li>
      </ul>
      <form class="navbar-form navbar-right" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>

      </button>

“navbar-toggle崩溃”是做什么的。 感谢