Question

我是bootstrap的新手，我正在尝试制作简单的菜单/导航。

我正在努力使菜单的内容与品牌一起居中。此外，当我将屏幕缩小时，菜单项会在品牌下移动。我怎么能这样做它不会？导航中似乎有足够的空间来不让物品移动。

注意：我没有为此编写任何CSS。

HTML：

<div class="navbar navbar-default" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#account-options" 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>
      <h4 class="navbar-brand">Image Box</h4>
    </div><!--end navbar header-->
    <!--togglable menu items-->
    <div class="collapse navbar-collapse" id="account-options">
      <ul class="nav navbar-nav">
        <li><a href="#">Upload Photo</a></li>
        <li><a href="#">Deactivate Account</a></li>
        <li><a href="#">Activate Account</a></li>
        <li><a href="#">Delete Account</a></li>
        <li><a href="#">Log Out</a></li>
      </ul>
    </div><!--end toggle-->
  </div><!--end container-->
</div><!--end navigation-->

Answer 1

我认为这是因为h4中的navbar-header元素。它在顶部和底部添加了额外的边距，这就是为什么它没有对齐。

.navbar-header h4 {margin:0;}

我把你的小提琴移走了，它正在工作。 https://jsfiddle.net/b9smvjn0/1/

这是你想要的吗？

修改

希望这就是你要找的东西。
注意：这是使用自定义css，因此如果您打算坚持使用纯引导程序，则可以采用其他方式。

我在brand和navbar周围添加了一个div，因此我们可以将这两个元素集中在一起。此外，我减少了导航栏内a标签上的填充量。这是必要的，因为你有多少菜单项。

然后我在text-align:center; margin:0 auto; div上使用了container的技巧。它位于media(min-width:768);内部，因为当它变小时，布局会发生变化，因此我们会将其恢复到原始位置。

这是更新的小提琴：https://jsfiddle.net/b9smvjn0/3/

Answer 2

要删除额外空格，您可以删除import math def compute_surface_area_cylindar(radius, height): surface_area = 2 * math.pi * radius * height + 2 * math.pi * math.pow(radius, 2) return surface_area radius = int(input("Radius of circle:")) #take this out "radius = int(radius)" and you save a line #take this out an you save a line "r = radius" height = int(input("Height of the cylinder:")) # take this out and you save a line "height = int(height) " #h = height print(compute_surface_area_cylindar(radius,height))的边距。要将所有<h4>内容居中，或将其保持在直线上，请使用以下内容：

<nav>

小提琴：https://jsfiddle.net/oLmnjh3p/

Twitter Bootstrap导航栏元素未按预期对齐

2 个答案:

修改