Bootstrap 3导航栏,顶部有Div作为其一部分?

时间:2016-05-27 16:48:03

标签: twitter-bootstrap-3

我不确定为什么我的下拉菜单没有显示为带有bootstrap 3的原型按钮?

另外,如果我想要导航菜单上方的某些内容,如何才能使其成为正确的布局?我试图在不编辑bootstrap CSS的情况下这样做,并原生使用它。

http://www.bootply.com/8IqCa4lI6T

<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
     </div>
<div class="container-fluid">
<div class="row">
    <div class="col-xs-4">
<img src="" class="img-responsive" alt="" height="50px" width="50px">picture
     </div>
    <div class="col-xs-4">
        <a href="" class="">action</a>
</div>
<div class="col-xs-4">        
            <span id="title">4rows text</span><br>
        <span id="title">4rows text</span><br>
 <span id="title">4rows text</span><br>
  </div></div>
  <!-- nav bottom -->
  <div class="row">
    <ul class="nav nav-pills navbar-nav navbar-left">
     <li>menuleft1</li><li>menuleft2</li><li>menuleft3</li>
    </ul><!-- /nav -->

      <ul class="nav nav-pills navbar-nav navbar-right">
        <li>menuright1</li><li>menuright2</li><li>menuright3</li>
      </ul><!-- /right_nav -->

  </div>

1 个答案:

答案 0 :(得分:1)

这是一个带有相应HTML的Bootply来完成我认为你想要的东西:

enter image description here

至于在导航栏上方放置一些东西。您无需修改​​Bootstrap CSS。通过为导航栏提供一个ID,并为该ID提供CSS属性,这将取代Bootstrap CSS。

或者,在Bootstrap CSS文件之后加载的单独CSS文件中覆盖Bootstrap类通常是可以的。这样你就不会改变Bootstrap CSS本身,但可以根据需要控制修改样式。