Bootstrap 3-如何将"Brand“文本/徽标向右移动/偏移(并将末尾的文本向左偏移)

Question

好的，我开始探索Bootstrap，在这个过程中，构建了页面顶部的基本导航栏。但是，当我按照bootstrap在他们的页面上提供的演示代码创建导航栏时，发生的情况是"Brand“文本位于靠近页面边缘(在桌面上)的栏的最左边。我附上了下面的图片，它显示了我的意思：

​

​

以下是相关代码的片段：

    <nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

所以我想把“品牌”抵消一点，不管我多想向右。同样，您可以在上图中看到栏最右侧的"Link“和"Dropdown”。我如何向左偏移它？或者换句话说，我希望栏中的文本/徽标以偏移量开始和结束，而不是坚持最左和最右。

令我惊讶的是，当我查看示例Bootstrap页面时，例如take a look at this page，顶部导航栏上的文本(“项目名称”)是左右偏移的，我看不到他们做了什么特殊的偏移。但当我使用相同的代码时，它显示在最边缘。

等等，我看到他们用了

  <div class="container">

而我已经使用了

  <div class="container-fluid">

因此，似乎使用“容器”给出了偏移量，而使用“容器-流体”将其推到了条的极端？

但是无论如何，我如何创建我想要的偏移量(在左边和右边有一定的偏移量)？

@jorn -感谢您的回复。无法将此内容添加到评论部分，因此编辑帖子以添加我的问题：

我将它添加到CSS中，现在它正在工作，并将其偏移了50像素。这很好。类似地，我将50px的偏移量添加到了导航栏的右侧，它也在右侧创建了偏移量。但现在的挑战是，我如何将该品牌与下面正文中的第一列完全垂直对齐，为此我使用了以下代码：

   <div class="container-fluid">
    <div class="row">
          <div class="col-md-10 col-md-offset-1">

现在假设我们使用50 px；作为品牌偏移量，但是使用"div class=“of md-10 of md- offset -1”>作为主体列，我如何保证品牌和主体的第一列之间有绝对的垂直对齐?现在，它似乎没有对齐，如下图所示：

​

​

我不想去猜测我应该为偏移量定义多少值，例如50px；或49px；或39px；等等--有没有另一种绝对可靠的方法来定义品牌的偏移量，使其自动对齐？谢谢。

编辑2：

看着CSS代码，我想到了这一点：

  .col-md-offset-1 {
    margin-left: 8.33333333%;
  }

然后，根据我的style.css，我添加了：

.navbar-brand {
     margin-left:8.33333333% !important;
}

尽管如此，Brand和body的第一列并不一致，如下图所示：

​

​

你知道为什么仍然存在未对准的情况吗？谢谢。

Answer 1

你可以使用空白符-left，这是一个fiddle

.navbar-brand
{
     margin-left:50px !important;
}

编辑

我很抱歉花了一段时间，但我已经重做了小提琴。你可以找到答案here。

.navbar-header{
    width:200px;
    margin-left:8.3333% !important;
}
.content{
    margin-top:100px;
}

偏移量的左边距必须在navbar-header上，而不是navbar-brand上。我希望这对你的项目有所帮助。