英文:
align content underneath a boostrap row where the above columns have an offset
问题
我有一排需要 offset-md-1 的锚点/ div，我的问题是下面的内容需要与上面带有偏移的一排对齐，并且要具有响应性。我似乎无法弄清楚如何做到这一点。当我在段落上使用边距时，当视口缩小时，内容会溢出。我也无法使用边距自动设置最大宽度，因为上面的行设计上不是完全“居中”的。有什么建议吗？谢谢 
HTML：
<div class="container">
<div class="row">
<a class="offset-md-1 col-md-3 jump-link" href="#">
<div><p class="font__jump-link">跳转链接1 偏移1</p></div>
</a>
<a class="col-md-3 jump-link" href="#">
<div><p class="font__jump-link">跳转链接2</p></div>
</a>
<a class="col-md-3 jump-link" href="#">
<div><p class="font__jump-link">跳转链接3</p></div>
</a>
</div>
<div class="row">
<p class="p-below-links">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab assumenda at commodi dicta, doloremque earum eius libero neque repudiandae soluta.</p>
</div>
</div>
CSS：
.p-below-links {
max-width: 1050px;
width: 100%;
}
注意：以上是您提供的代码的翻译部分。
英文:
I have a row of anchors / divs that require an offset-md-1, my issue is the content below the row of anchors needs to align with the row above that has the offset and be responsive. I cannot seem to figure out how to do this. When I use margins on the paragraphs the content overflows when viewport shrinks. I also cannot set a max width with margins auto as the row above is not exactly "center" by design. Any ideas? thank you
html:
<div class="container">
<div class="row">
<a class="offset-md-1 col-md-3 jump-link" href="#">
<div><p class="font__jump-link">Jump Link 1 offset1</p></div>
</a>
<a class="col-md-3 jump-link" href="#">
<div><p class="font__jump-link">Jump Link 2</p></div>
</a>
<a class="col-md-3 jump-link" href="#">
<div><p class="font__jump-link">Jump Link 3</p></div>
</a>
</div>
<div class="row">
<p class="p-below-links">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab assumenda at
commodi dicta, doloremque
earum eius libero neque repudiandae soluta.</p>
</div>
</div>
css:
.p-below-links{
max-width:1050px
width: 100%;
答案1
得分: 1
为什么不能简单地应用相同的偏移量？一般来说，Bootstrap 网站中的所有内容都应该由网格包含，以确保一致的行为。
<div class="container">
<div class="row">
<a class="col-3 offset-xs-1 jump-link" href="#">
<div>
<p class="font__jump-link">跳转链接1 偏移1</p>
</div>
</a>
<a class="col-3 jump-link" href="#">
<div>
<p class="font__jump-link">跳转链接2</p>
</div>
</a>
<a class="col-3 jump-link" href="#">
<div>
<p class="font__jump-link">跳转链接3</p>
</div>
</a>
</div>
<div class="row">
<div class="col-9 offset-xs-1">
<p class="p-below-links">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab assumenda at commodi dicta, doloremque earum eius libero neque repudiandae soluta.</p>
</div>
</div>
</div>
英文:
Why can't you just apply the same offset? Generally speaking, all content in a Bootstrap site should be contained by the grid for consistent behavior.
<div class="container">
<div class="row">
<a class="col-3 offset-xs-1 jump-link" href="#">
<div>
<p class="font__jump-link">Jump Link 1 offset1</p>
</div>
</a>
<a class="col-3 jump-link" href="#">
<div>
<p class="font__jump-link">Jump Link 2</p>
</div>
</a>
<a class="col-3 jump-link" href="#">
<div>
<p class="font__jump-link">Jump Link 3</p>
</div>
</a>
</div>
<div class="row">
<div class="col-9 offset-xs-1">
<p class="p-below-links">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab assumenda at commodi dicta, doloremque earum eius libero neque repudiandae soluta.</p>
</div>
</div>
</div>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论