logo标签列表

Bootstrap导航栏宽度不满屏

htmlcssrtwitter-bootstrapshiny
4
我是一个 Bootstrap 新手，使用 R 和 Shiny 构建了一个 HTML 网站，其中再次使用了 Bootstrap。如果在宽屏幕上打开页面，则页面将使用整个宽度，但导航栏似乎仅限于大约 1000 像素的宽度。超过此宽度后，它会换行，并在第二行中显示所有其他项目。然而，我想尽可能使用整个可用宽度，直到开始新行。当然，如果导航栏即使在宽屏幕上也有太多项目，则应开始第二行，但如果还有一些屏幕空间，则不应该这样做。
到目前为止，这并没有帮助：
  .navbar .navbar-collapse {
      white-space: nowrap;
      width:100%;
}

设置一个固定的像素宽度（虽然我不想这样做，但为了测试而已）并没有使导航栏居中，反而将其延伸到了更右侧。

.navbar .navbar-collapse {
          white-space: nowrap;
          width:2000px;
    }

有什么建议可以让导航栏上的项目使用整个导航栏宽度吗？
编辑：由于是由R和shiny自动生成的，所以不知道如何将其放在jsfiddle或其他平台上。以下是相关HTML代码：
<nav class="navbar navbar-default navbar-static-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-2538">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <span class="navbar-brand"></span>
        </div>
        <div class="navbar-collapse collapse" id="navbar-collapse-2538">
          <ul class="nav navbar-nav">
            <li class="active">
              <a href="#tab-3459-1" data-toggle="tab" data-value="TestA">TestA</a>
            </li>
            <li>
              <a href="#tab-3459-2" data-toggle="tab" data-value="TestB">TestB</a>
            </li>
            <li>
              <a href="#tab-3459-3" data-toggle="tab" data-value="TestC">TestC</a>
            </li>
            <li>
              <a href="#tab-3459-4" data-toggle="tab" data-value="Test1">Test1</a>
            </li>
            <li>
              <a href="#tab-3459-5" data-toggle="tab" data-value="Test2">Test2</a>
            </li>
            <li>
              <a href="#tab-3459-6" data-toggle="tab" data-value="Test3">Test3</a>
            </li>
            <li>
              <a href="#tab-3459-7" data-toggle="tab" data-value="Test4">Test4</a>
            </li>
            <li>
              <a href="#tab-3459-8" data-toggle="tab" data-value="Test5">Test5</a>
            </li>
            <li>
              <a href="#tab-3459-9" data-toggle="tab" data-value="Test6">Test6</a>
            </li>
            <li>
              <a href="#tab-3459-10" data-toggle="tab" data-value="Test7">Test7</a>
            </li>
            <li>
              <a href="#tab-3459-11" data-toggle="tab" data-value="Test8">Test8</a>
            </li>
            <li>
              <a href="#tab-3459-12" data-toggle="tab" data-value="Test9">Test9</a>
            </li>
            <li>
              <a href="#tab-3459-13" data-toggle="tab" data-value="Test10">Test10</a>
            </li>
            <li>
              <a href="#tab-3459-14" data-toggle="tab" data-value="Test11">Test11</a>
            </li>
            <li>
              <a href="#tab-3459-15" data-toggle="tab" data-value="Test12">Test12</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
请发布jsfiddle。 - Alex
请提供相关的 HTML！ - user3589620
http://jsfiddle.net/Skaadel/20n4qzfu/ - Skaudel
3个回答
6
Bootstrap使用网格系统和容器来控制宽度和间距。你正在使用一个 <div class="container"> 来作为你的导航栏，将其更改为 <div class="container-fluid">。
不需要添加任何自定义CSS，并尽可能避免使用自定义CSS，除非你知道你要覆盖什么，否则它可能会破坏页面布局。
有关此内容的更多信息，请参见http://getbootstrap.com/css/#overview-container。
2
这是由于Bootstrap响应式设计造成的。在此处阅读有关禁用响应式的信息 -> http://getbootstrap.com/getting-started/#disable-responsive 我不知道你想要多大程度上重置响应性，如果你只关心导航栏，也许你可以满意。
.container {
    width: 100%;
    white-space: nowrap;
}

查看演示 -> http://jsfiddle.net/gfpua400/ 当然，如果父元素（这里是 body）的宽度太小以至于无法容纳所有的 .icon-bar <span> 元素，那么它仍然会出现问题，但我想这只是正常的 HTML 渲染，您应该已经意识到了（不过也可以避免这种情况）。
正是我所需要的！非常感谢。 - MichiZH
不要覆盖容器，你可以使用 container-fluid。http://getbootstrap.com/css/#overview-container - Daniel Tung
-2
  1. getbootstrap.com/components页面显示需要Javascript插件，你是否正确地包含了它？
  2. 在navbar-header之前，你是否又加入了其他容器或者使用了它作为容器？
  3. 你尝试过使用Chrome调试器吗？通常你可以通过修改CSS来实时查看效果，但我建议不要更改Bootstrap CSS，因为它应该适用于当前的任务。

你已经更新了一些代码，我会首先进行调整和更新^^

所以经过...

删除div容器后，现在它使用文档的全宽度...你能试试吗？

即<div class="container">这一行，以及在</ul>列表后面删除其中一个闭合div标签</div>

抱歉我的第一篇帖子做了大量的编辑 :)

不应该删除容器，因为Bootstrap使用它来排序和构建页面的其余部分，这可能会破坏边距或填充。如果您想要一个全宽度的容器，请切换到container-fluid，同时保持响应式设计。http://getbootstrap.com/css/#overview-container - Daniel Tung
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接