Question

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

enter image description here

以下是相关代码的片段：

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

所以似乎使用“容器”给出了偏移量，而使用“容器 - 流体”将它推到了极限吧？

但无论如何，我如何按照自己的意愿创建偏移量（左右两侧）？

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

我将它添加到CSS中它正在工作，现在将其偏移50 px。那很好。类似地，我向导航栏右侧添加了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“＆gt;作为body列，我怎么能保证Brand和第一列之间存在绝对垂直对齐身体？现在，它似乎没有对齐，如下图所示：

enter image description here

我不想做我应该为偏移定义多少值的猜测，即50 px;或49像素;或39 px;是否有另一种绝对可靠的方法来定义品牌的偏移量，使其自动对齐？谢谢。

编辑2：

看看CSS代码，我想到了这个：

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

然后相应于我的style.css我补充道：

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

但是尽管如此，品牌和身体的第一列没有对齐，如下图所示：

enter image description here

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

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

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

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

1 个答案:

修改