Bootstrap 3 - 如何将“品牌”文本/徽标向右移动/偏移（并将末尾的文本向左偏移）

Question

好的，我开始探索 Bootstrap，并在此过程中构建了页面顶部的基本导航栏。但是，当我按照引导程序在其页面上提供的演示代码并创建导航栏时，会发生“品牌”文本位于靠近页面边缘的栏的最左侧（在桌面上） .我附上下面的图片来说明我的意思：

这里是相关代码的sn-p：

    <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>

因此，我想将“品牌”稍微偏移一点，但我想向右。 同样，您可以在上图中看到栏最右侧的“链接”和“下拉菜单”。如何将其向左偏移？ 或者换句话说，我希望栏中的文本/徽标以偏移量开始和结束，而不是停留在最左端和最右端。

令我惊讶的是，当我查看示例 Bootstrap 页面时，例如 take a look at this page 顶部导航栏上的文本（“项目名称”）从右侧和左侧偏移，我没有看到任何特别之处他们已经完成了抵消。但是当我使用相同的代码时，它会显示在最边缘。

哦，等等，我看到他们已经使用了

  <div class="container">

我用过

  <div class="container-fluid">

所以看起来使用“container”给出了偏移量，而使用“container-fluid”将它推到了极限？

但无论如何，我如何根据需要创建偏移量（左右一定量）？

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

我将它添加到 CSS 中，它正在工作，现在偏移了 50 像素。那很好。同样，我将 50px 偏移量添加到 navbar-right 并且它也在右侧创建偏移量。但现在的挑战是我如何将这个品牌完全垂直对齐到下面我使用以下代码的正文中的第一列：

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

现在假设我们使用的是 50 像素；对于品牌偏移，但使用“div class="col-md-10 col-md-offset-1"> 作为正文列，我如何保证品牌和第一列之间存在绝对垂直对齐身体？现在，它似乎没有对齐，如下图所示：

我不想猜测我应该为偏移定义多少值，例如 50 像素；或 49 像素；或 39 像素；等等 - 是否有另一种绝对确定的方式来定义品牌的偏移量，使其自动对齐？谢谢。

编辑 2：

查看 CSS 代码，我想到了：

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

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

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

尽管如此，品牌和正文的第一列并没有对齐，如下图所示：

知道为什么仍然存在错位吗？谢谢。

Answer 1

你可以只使用margin-left，这里是fiddle

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

编辑

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

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

偏移量留下的边距必须在导航栏标题而不是导航栏品牌上。我希望这对您的项目有所帮助。