Html 实现列之间的框架边距
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34968120/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Materialize framework margin between columns
提问by Kerlos Aguero
Materialize framework comes with strange layout (at least for me). I can't find any margin between columns. This is my code:
Materialize 框架带有奇怪的布局（至少对我而言）。我找不到列之间的任何边距。这是我的代码：
<div class="container">
<div class="row">
<div class="col s4">
kerlos
</div>
<div class="col s4">
kerlos
</div>
<div class="col s4">
kerlos
</div>
</div>
</div>
And this is how it is look in browser.
There are no margins between the columns!
列之间没有边距！
回答by sergdenisov
I suggest you use a separate element inside a column, for example, .col-content:
我建议您在列中使用单独的元素，例如.col-content：
body {
color: white;
}
.blue {
background: blue;
}
.black {
background: black;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col s4">
<div class="col-content blue">kerlos</div>
</div>
<div class="col s4">
<div class="col-content black">kerlos</div>
</div>
<div class="col s4">
<div class="col-content blue">kerlos</div>
</div>
</div>
</div>回答by AntonAL
Whitespace between .colblocks is implemented via padding in Materialize. So, .colelements are used for layout.
.col块之间的空白是通过 Materialize 中的填充实现的。因此，.col元素用于布局。
Just should place Your visual blocks as childrens of .colelements.
只是应该将您的视觉块作为.col元素的孩子。
Example – https://jsfiddle.net/y2dahvg5/
示例 – https://jsfiddle.net/y2dahvg5/
<div class="row">
<div class="col s12 m6 xl4">
<div class="card">
<div class="card-content">
<span class="card-title">Item</span>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
<div class="col s12 m6 xl4">
<div class="card">
<div class="card-content">
<span class="card-title">Item</span>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
<div class="col s12 m6 xl4">
<div class="card">
<div class="card-content">
<span class="card-title">Item</span>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
<!-- Another items ... -->
</div>
回答by Aakash
The best way is to use classes provided by the Materialize framework, it provides us with a class 'offset' to add margins between columns. For example you can use the following code to add margins. You can learn more about grids and offsets here.
最好的方法是使用 Materialize 框架提供的类，它为我们提供了一个类 'offset' 来添加列之间的边距。例如，您可以使用以下代码添加边距。您可以在此处了解有关网格和偏移的更多信息。
CSS
CSS
.green {
background: green;
}
.black {
background: black;
color: #fff;
}
HTML
HTML
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col s3 offset-s1 green">
kerlos
</div>
<div class="col s3 offset-s1 black">
kerlos
</div>
<div class="col s3 offset-s1 green">
kerlos
</div>
</div>
</div>
回答by Beto Aveiga
I think you only have put a nested column. That will add a padding of .75rem each side. You should put your background in the nested column. Hope that helps.
我认为您只放置了一个嵌套列。这将在每侧添加 0.75rem 的填充。您应该将背景放在嵌套列中。希望有帮助。
回答by Henry
As of Current Materializecss version, this is not the case.
从 Current Materializecss 版本开始，情况并非如此。
I modified the html code for better visualization:
我修改了 html 代码以获得更好的可视化：
<div class="container">
<div class="row">
<div class="col s4 teal">
<span class="teal lighten-2">kerlos</span>
</div>
<div class="col s4 red">
<span class="teal lighten-2">kerlos</span>
</div>
<div class="col s4 teal">
<span class="teal lighten-2">kerlos</span>
</div>
</div>
</div>
The Result will look like as below:
结果将如下所示：
Now suppose you don't want the padding then you have to add style="padding:0"
现在假设您不想要填充，那么您必须添加 style="padding:0"
回答by Mindsect Team
None of these answers are actually answering your question. I know exactly what you mean. Materialize (unlike Boostrap) does not take into consideration that you will use a header or content area with a solid color, so it doesn't provide "margin-space" like Bootstrap:
这些答案都没有真正回答你的问题。我确切地知道你的意思。Materialize（与 Boostrap 不同）没有考虑到您将使用纯色的标题或内容区域，因此它不像 Bootstrap 那样提供“边距”：
<div class="col-md-6"><div style="background: blue;">blue</div></div>
<div class="col-md-6"><div style="background: blue;">blue</div></div>
That would produce a solid whitespace of about 15px between each margin, regardless of the number of columns you create. It also degrades nicely.
无论您创建的列数如何，这都会在每个边距之间产生大约 15 像素的纯空白。它也很好地降解。
When others are telling you to just apply a blanket padding solution, they're forgetting that the column to the right of the page will also have a padding and therefore ruin the line of containers on the right side of the page.
当其他人告诉您只应用一揽子填充解决方案时，他们忘记了页面右侧的列也会有填充，因此会破坏页面右侧的容器行。
I suggest using @media queries depending on how many columns
我建议根据列数使用@media 查询
If there are only two columns, then you can set padding-right on ALL divs to 15px, but then for @media query of large screen, set nth-child(even) (all divs on the right side of the screen with a padding of 0px;.
如果只有两列，那么你可以将所有div上的padding-right设置为15px，但是对于大屏幕的@media查询，设置nth-child(even)（屏幕右侧的所有div都带有padding 0px;.
Keep in mind this still makes the left-hand column 15pix thinnerthan the right column, and if you have uniform content, it will be noticeable.
请记住，这仍然会使左侧列比右侧列细15pix ，如果您有统一的内容，这将很明显。
In this sense, Materialize failed to provide a proper column layout white space solution (using padding instead of global margin-space) and Bootstrap is just better in this area. Good luck to you.
从这个意义上讲，Materialize 未能提供适当的列布局空白解决方案（使用填充而不是全局边距空间），而 Bootstrap 在这方面做得更好。祝你好运。
回答by Aziz
Try this CSS
试试这个 CSS
.col {
padding:20px;
box-sizing:border-box;
}
