28

以 TB 为例，我有一个导航栏，其标记如下：

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

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

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

4

11 回答 11

37

只需将类容器更改为 container-fullwidth，如下所示：

<div class="container-fullwidth">
于 2015-02-20T10:35:26.050 回答
26

不确定该navbar-static-top课程是否在 2.2.2 版之前可用，但我认为您可以通过以下方式实现您的目标：

<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 为例。

于 2013-02-06T19:01:46.230 回答
23

将导航栏从容器中取出：

<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>
于 2012-10-26T11:24:09.710 回答
14

我参加聚会很晚了，但这个答案在谷歌搜索结果中名列前茅。

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>
于 2014-10-10T15:16:46.830 回答
2

把你的<nav>元素从<div class='container-fluid'>. 例如： -

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

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

于 2018-10-14T11:55:55.380 回答
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>
于 2012-10-26T11:28:02.197 回答
1

只需替换<div class="container">为<div class="container-fluid">，即两边没有边距的容器。

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

于 2017-03-22T08:50:49.340 回答
0

我知道我参加聚会有点晚了，但我通过调整 CSS 使宽度跨度为 100% 并将 l/r 边距设置为 0px 来解决了这个问题； 

#div_id
{
    margin-left: 0px;
    margin-right: 0px;
    width: 100%;
}
于 2014-01-07T21:56:23.427 回答
0

你可以覆盖一些CSS

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

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

!important以防万一您在自bootstrap.css定义 css 之后链接。

并将您的导航 html 添加到.container

于 2012-10-26T13:58:27.447 回答
0

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

    .navbar-inner{
       -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0;
    }
于 2012-11-14T16:05:41.527 回答
0

您必须将 col-md-12 添加到您的内部导航栏。md 用于桌面。您可以从引导程序的选项列表中选择其他选项。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>
于 2017-02-14T16:55:01.307 回答