Twitter Bootstrap - 全宽导航栏

时间:2012-10-26 11:19:49

标签: css twitter-bootstrap navbar

按照TB的例子,我有一个标记如下的导航栏:

<div class="container">
    <div class="navbar">
        <div class="navbar-inner">
                   <!-- nav bar items here -->
        </div>
    </div>
</div>

我希望这能跨越屏幕的整个宽度而没有任何圆角 - 类似于导航栏的静态顶部样式。

我似乎无法在TB中找到如何做到这一点。如果没有办法,我需要用什么CSS来覆盖TB并且不会破坏响应能力?

11 个答案:

答案 0 :(得分:34)

只需将类容器更改为容器全宽,如下所示:

<div class="container-fullwidth">

答案 1 :(得分:26)

不确定版本2.2.2之前navbar-static-top类是否可用,但我认为您可以通过以下方式实现目标:

<div class="navbar navbar-static-top">
    <div class="navbar-inner">
        <ul class="nav">
            <li class="active"><a href="#">Test1</a></li>
            <li><a href="#">Test2</a></li>
            <li><a href="#">Test3</a></li>
            <li><a href="#">Test4</a></li>
            <li><a href="#">Test5</a></li>
        </ul>
    </div>
</div>
<div class="container">
    ...
</div>

我整理了jsFiddle as an example

答案 2 :(得分:15)

将导航栏放出容器:

<div class="navbar">
    <div class="navbar-inner">
               <!-- nav bar items here -->
     </div>
</div>
<div class="container">

</div>

编辑:

这是我用响应式导航栏做的一个。代码适合文档正文:

    <div class="navbar navbar-fixed-top">
        <div class="navbar-inner">
        <div class="container">

          <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          </a>

          <!-- Be sure to leave the brand out there if you want it shown -->
          <a class="brand" href="#">Project name</a>


          <!-- Everything you want hidden at 940px or less, place within here -->
          <div class="nav-collapse">
          <!-- .nav, .navbar-search, .navbar-form, etc -->
          <ul class="nav">
              <li class="active"><a href="#">Home</a></li>
              <li class="divider-vertical"></li>
              <li><a href="#">Link</a></li>
              <li class="divider-vertical"></li>
              <li><a href="#">Link</a></li>
            </ul>
          <ul class="nav pull-right">
            <li><a href="#">Log out</a></li>
          </ul>
          </div>

          </div>
        </div>

    </div>
  <div class="container">
    <div class="row">
      <div class="span12">

      </div>
    </div>


  </div> <!-- end container -->
  <script type="text/javascript" src="/assets/js/jquery-1.8.2.min.js"></script>
  <script type="text/javascript" src="/assets/js/bootstrap.min.js"></script>

答案 3 :(得分:13)

我参加派对的时间已经很晚了,但这个答案在Google搜索结果中排名靠前。

Bootstrap 3有内置的答案,将导航栏中的容器div设置为container-fluid,它将降至屏幕宽度。

像这样:

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container-fluid">
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li><a href="/">More Stuff</a></li>
      </ul>
    </div>
  </div>
</div>

答案 4 :(得分:1)

您需要将容器推向导航栏。

请在http://jsfiddle.net/meetravi/aXCMW/1/

找到我的工作小提琴
<header>

    <h2 class="title">Test</h2>
</header>
<div class="navbar">
    <div class="navbar-inner">
        <ul class="nav">
            <li class="active"><a href="#">Test1</a></li>
            <li><a href="#">Test2</a></li>
            <li><a href="#">Test3</a></li>
            <li><a href="#">Test4</a></li>
            <li><a href="#">Test5</a></li>

        </ul>
    </div>
</div>
<div class="container">

</div>

答案 5 :(得分:1)

只需将<div class="container">替换为<div class="container-fluid">,这是两边都没有边距的容器。

我认为这是最好的解决方案,因为它避免了一些无用的覆盖并使用了内置类,它很干净。

答案 6 :(得分:1)

<nav>中取出您的<div class='container-fluid'>元素。 例如:-

<nav>
 ......nav content goes here
<nav>

<div class="container-fluid">
  <div>
   ........ other content goes here
  </div>
</div>

答案 7 :(得分:0)

你可以覆盖一些css

body {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.navbar-inner {
    border-radius: 0px !important;
}

如果您在自定义CSS后链接!important,则需要bootstrap.css

并从.container

中添加您的导航HTML

答案 8 :(得分:0)

要删除边角上的边框半径,请将此样式添加到custom.css文件

    .navbar-inner{
       -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0;
    }

答案 9 :(得分:0)

我知道我参加派对有点晚了,但是我通过调整CSS使宽度跨度达到100%,并将l / r边距设置为0px来解决问题。

#div_id
{
    margin-left: 0px;
    margin-right: 0px;
    width: 100%;
}

答案 10 :(得分:0)

您必须将col-md-12添加到内部导航栏。 md用于桌面。您可以从bootstrap的选项列表中选择其他选项。 col-md-12中的12是全宽。如果你想要半宽,你可以使用6而不是12。例如COL-MD-6。

  

以下是您问题的解决方案

    <div class="container">
       <div class="navbar">
          <div class="navbar-inner col-md-12">
               <!-- nav bar items here -->
          </div>
       </div>
   </div>