- 首页
- 前端开发
- Bootstrap - 我们必须使用行和列吗?
Bootstrap - 我们必须使用行和列吗?
[英] Bootstrap - do we have to use rows and columns?
本文介绍了Bootstrap - 我们必须使用行和列吗?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
让我用两个例子来解释:
<h1>标题</h1><div class="col-md-12">内容</div>
对比
<div class="col-md-12"><h1>Title</h1></div>
<div class="row"><div class="col-md-12">内容</div>
示例过于简化，但我的问题是所有内容都必须在列内或需要的地方，他们可以坐在外面吗?另一个例子:
<div class="col-md-6 col-sm-6"><img src="img/Police2-600x250.jpg" class="全宽"><div class="col-md-12 新闻"><p class="date">发布 <strong>4 月 1 日</strong></p><h3>标题</h3><p>这是对故事内容的总结，就像一个小标题来吸引你的注意力.等等等等等等.</p>
<div class="col-md-6 col-sm-6"><img src="img/Police2-600x250.jpg" class="全宽"><div class="col-md-12 新闻"><p class="date">发布 <strong>4 月 1 日</strong></p><h3>标题</h3><p>这是对故事内容的总结，就像一个小标题来吸引你的注意力.等等等等等等.</p>
我不希望图像受到任何填充，但我确实希望它下面的内容
解决方案
他们可以坐在列之外，但这样做会牺牲填充.Bootstrap 的 .row 样式将 margin-left 和 margin-right 设置为 -15px；.col-... 类弥补了这一点，两边各有 15px 填充.
为了弥补它，您必须手动将此 15px 填充添加到非 .col-... 元素.
不过，您的 h1 没有理由不能是 .col-... 本身:
<h1 class="col-md-12">标题</h1><div class="col-md-12">内容</div>
Let me explain with 2 examples:
<div class="row">
<h1>Title</h1>
<div class="col-md-12">Content</div>
</div>
vs
<div class="row">
<div class="col-md-12"><h1>Title</h1></div>
</div>
<div class="row">
<div class="col-md-12">Content</div>
</div>
The examples are overly simplified but my question is that does everything have to be within a column or where needed, can they sit outside? Another example:
<div class="row">
<div class="col-md-6 col-sm-6">
<img src="img/Police2-600x250.jpg" class="full-width">
<div class="col-md-12 news">
<p class="date">POSTED <strong>01 APRIL</strong></p>
<h3>Heading</h3>
<p>This is a summary of what the story is about like a subheading to catch your attention. Blah blah blah b l a h blah blah.</p>
</div>
</div>
<div class="col-md-6 col-sm-6">
<img src="img/Police2-600x250.jpg" class="full-width">
<div class="col-md-12 news">
<p class="date">POSTED <strong>01 APRIL</strong></p>
<h3>Heading</h3>
<p>This is a summary of what the story is about like a subheading to catch your attention. Blah blah blah b l a h blah blah.</p>
</div>
</div>
</div>
I don't want the images to be subject to any padding but I do want the content below it to
解决方案
They can sit outside of a column, but in doing this you're sacrificing padding. Bootstrap's .row style sets margin-left and margin-right to -15px; the .col-... classes make up for this with 15px padding on either side.
To make up for it, you'd have to manually add this 15px padding to your non-.col-... elements.
That said, however, there's no reason your h1 can't be a .col-... itself:
<div class="row">
<h1 class="col-md-12">Title</h1>
<div class="col-md-12">Content</div>
</div>
这篇关于Bootstrap - 我们必须使用行和列吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
