Bootstrap - 我们必须使用行和列吗？

让我用2个例子说明：Bootstrap - 我们必须使用行和列吗？

<div class="row"> 
    <h1>Title</h1> 
    <div class="col-md-12">Content</div> 
</div>

<div class="row"> 
    <div class="col-md-12"><h1>Title</h1></div> 
</div> 
<div class="row"> 
    <div class="col-md-12">Content</div> 
</div>

的例子过于简化，但我的问题是，什么都要是或在需要的地方，可他们坐在外面一列中？又如：

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

我不希望图像受到任何填充但我想它下面的内容

来源

2016-10-24 pee2pee

如果你尝试你的简单例子，你会看到不同之处。第一个标题与内容的边距不一样。所以这是很重要的，如果你使用一个列或不 – DestinatioN

减去选票使这是一个可怕的地方。 @DestinatioN感谢您的评论。我的意思是严格的基于代码的观点而不是美学。道歉。 – pee2pee

他们可以坐在外面一列，但在这样做你正在牺牲填充。 Bootstrap的.row样式集margin-left和margin-right到-15px; .col-...类弥补了这一点，每边都有15px的填充。

为了弥补它，你必须手动添加这个15px的填充到你的非.col-...元素。

但是，尽管如此，没有理由你h1不能是.col-...本身：

<div class="row"> 
    <h1 class="col-md-12">Title</h1> 
    <div class="col-md-12">Content</div> 
</div>

来源

2016-10-24 10:45:35

让我们从美学外部 - 纯粹从结构的角度来看，最好是将所有内容都包含在一列中？ – pee2pee

@ pee2pee没有理由不得不这样做。不过，它们旨在共同协作。我已经更新了我的答案以包含其他内容。 –

感谢:-)最后一个问题，嵌套列没有行是否合理？ – pee2pee

如果你想用引导的网格，是，列必须是直接孩子行和内容应放置在列中。从引导文件...

http://getbootstrap.com/css/#grid-intro

内容应放在列内，只列可以行的直接孩子。

来源

2016-10-24 11:39:40 ZimSystem

因此，列可以是列的儿童，然后 – pee2pee

是的，只要他们在另一个'行'标签.. http://getbootstrap.com/css/#grid-nesting – ZimSystem

然后我得到填充，我不想要，虽然 – pee2pee

Bootstrap - 我们必须使用行和列吗？

回答

相关问题