如何对齐Bootstrap导航栏中留下的品牌标题和链接？ [英] How to align brand title and links left in Bootstrap navbar?

问题描述

我是Bootstrap的新手，我一直在努力了解导航栏。我注意到，当浏览器已满（宽屏）宽度时，品牌标题和导航锚点保持朝向页面的左侧中心，而不是与页面的左侧对齐，就像窗口较小时一样。如何让导航栏中的文本夹在页面的左侧？无论浏览器窗口的宽度有多大，我都希望能够使其保持在窗口的左侧。有没有特别的理由不这样做？

I am new to Bootstrap and I have been working on getting to know the navbar. I notice that when the browser is full (widescreen) width, the brand title and nav anchors keep toward the left center of the page, instead of aligning to the very left of the page, as it does when the window is smaller. How can I make the text in the navbar hug the left of the page? Regardless of how wide the browser window gets I'd like to be able to make it stick to the left of the window. Is there a particular reason not to do this?

这是 在jsFiddle上进行现场演示 。请注意，如果您拉动手柄并尽可能向左扩展视口，则文本最终会移向导航栏的中心。

Here is a live demo on jsFiddle. Notice that if you pull the handle and widen the viewport as much as possible to the left, the text will eventually move toward the center of the navbar.

我的导航栏标记是从bootstrap提供的初学者演示中也可以看出，我知道响应式功能和图标没有挂在小提琴上，但是他们正在开发我的本地项目，并且与这个问题无关。我想我需要文字对齐离开我的自定义CSS，但我尝试应用此失败。任何帮助将不胜感激。

My navbar markup is the same from the starter demo provided with bootstrap, I know the responsive features and icons aren't hooked up in the fiddle, however they are working on my local project and are not relevant to the question. I imagine I need to text-align left my custom CSS, however my attempts to apply this have failed. Any help would be much appreciated.

    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="brand" href="#">Project name</a>
          <div class="nav-collapse collapse">
            <ul class="nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#about">About</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
        <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>
      </div>
    </div>

推荐答案

品牌是居中的，因为它位于container div和这个容器div总是以不同的宽度为中心，这取决于你的view-port或browser窗口的宽度。

The brand is "centered" because it is inside a container div and this container div is always centered with varying width based on the width of your view-port or browser window.

我建议你保持这种状态，因为它给了它更加对称的外观。如果您仍然想要更改它，则只需从容器div中删除品牌链接即可。像这样：

I would advice that you keep it that way because it gives it a more symmetrical look. If you still want to change it, all you need to do is remove the brand link from the container div. Like so:

<div class="navbar navbar-inverse navbar-fixed-top">
   <div class="navbar-inner">
      <a class="brand" href="#">Project name</a>
      <div class="container">
         <div class="nav-collapse collapse">
         ...

这篇关于如何对齐Bootstrap导航栏中留下的品牌标题和链接？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！