Question

我正在使用bootstrap 3.我正在尝试在html中执行片段标识符。我的问题是，当我点击一个链接（来自图片：link1或link2）时，内容会上升并放在导航栏后面。我想在导航栏下方显示我的内容。我怎样才能做到这一点？如果有人对此有任何疑问，请与我分享。 Bootply链接：http://www.bootply.com/FlMIBamLwj

点击链接之前：

enter image description here

点击链接后

enter image description here

我的代码在这里：

CSS:
@media (min-width: 979px) {
body {
    padding-top: 60px; 
     }
}

    Html:
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>
</nav>

    <div class="container">
        <div class="row clearfix">
          <div class="col-md-4 column">
            <div class="list-group">
                <a href="#l1" class="list-group-item list-group-item-success">List1</a>
                <a href="#l2" class="list-group-item list-group-item-info">List2</a>
                <a href="#l3" class="list-group-item list-group-item-warning">List3</a>                    
            </div>
          </div>

          <div class="col-md-8 column">
            <div class="panel panel-default" id="l1">
              <div class="panel-heading">
                <h3 class="panel-title">
                  List 1 title
                </h3>
              </div>
              <div class="panel-body">
                list1 content
              </div>
              <div class="panel-footer">
                list1 footer
              </div>
            </div>

            <div class="panel panel-default" id="l2">
              <div class="panel-heading">
                <h3 class="panel-title">
                  List 2
                </h3>
              </div>
              <div class="panel-body">
                List 2 content
              </div>
              <div class="panel-footer">
                List 2 footer
              </div>
            </div>

            <div class="panel panel-default" id="l3">
              <div class="panel-heading">
                <h3 class="panel-title">
                  list3 title
                </h3>
              </div>
              <div class="panel-body">
                list3 content
              </div>
              <div class="panel-footer">
                list3 footer
              </div>
            </div>

          </div>
        </div>
      </div>

Bootply链接：http://www.bootply.com/FlMIBamLwj#

Answer 1

这是散列片段标识符的固有问题。它将页面移动到锚点，忽略边距和填充。使用像你的情况一样的固定标头时，这更令人讨厌。

你可以使用这个hack，我一直在使用::before伪元素。

您更新的bootply：http://www.bootply.com/KViKzJkfX8

从面板中删除id。而是在每个具有id的此类面板之前插入锚点，以便它们充当您的片段标识符。像这样：

而不是：

<div class="panel panel-default" id="l1">
...
<div class="panel panel-default" id="l2">
...

执行此操作：

<a id="l1"></a>
<div class="panel panel-default">
...
<a id="l2"></a>
<div class="panel panel-default">
...

为每个锚点添加::before伪元素：

#l1::before, #l2::before, #l3::before { 
  content: "";
  display: block;
  height: 60px; 
  margin: -60px 0 0 0; 
}

这将在锚点之前创建一个伪元素，其高度等于body填充（用于偏移固定标题的填充）。为了否定这个伪元素占据的空间，给它一个相同高度的负上边距。这将使它显然消失。

现在，当您单击菜单项时，页面将转到相应的锚点，但由于前面的::before伪元素的高度，页面将停在那里。

希望这有帮助。

为了粘贴左侧菜单，您可以使用bootstrap affix。

您所要做的就是将affix课程添加到list-group：

<div class="col-md-4 column">
    <div class="list-group affix" > <!-- Add affix class here -->
        <a href="#l1" class="list-group-item list-group-item-success">List1</a>
        <a href="#l2" class="list-group-item list-group-item-info">List2</a>
        <a href="#l3" class="list-group-item list-group-item-warning">List3</a>                    
    </div>
</div>

并提供相当于col-md-4的宽度（您已给予该列），即大约30％。这是因为affix会将其位置转换为fixed，因此将其从流量中取出，因此宽度将自动相对于内容。

将此单一样式添加到CSS：

.affix { width: 30%; }

那就是它。只是两个变化。将类affix添加到菜单包装器中。添加.affix样式以修复宽度。

Answer 2

这是锚标记的默认功能。如果您在同一页面上导航，浏览器会将您带到该标记。

如果您只想移动内容部分，则必须将其内容和高度与页面的其余部分分开。这可以通过对其应用高度和溢出属性来完成：

#scrollableDiv {
  height:100px;
  overflow:auto;
}

将id添加到要滚动的div

<div id="scrollableDiv" class="col-md-8 column">
    <div class="panel panel-default" id="l1">
    ...

可在此处查看工作版本：http://www.bootply.com/JaIlKXHycj

html内容中的片段落后于导航栏，如何防止这种情况？

2 个答案: