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

Question

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

以下是相关代码片段：

    <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 页面时 看一下此页面 顶部导航栏上的文本（“项目名称”）从右侧和左侧偏移，但我没有看看他们为抵消所做的任何特别的事情。但是当我使用相同的代码时，它会显示在最边缘。

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

  <div class="container">

而我用过

  <div class="container-fluid">

所以看起来使用“容器”给出了偏移量，而使用“容器流体”则将其推到了条形的极端？

但是无论如何，如何按照我的意愿创建偏移（左右一定量）？

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

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

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

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

我不想猜测应该为偏移量定义多少值，即 50 px；或 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;
}

编辑

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

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

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