实现列之间的框架边距

Question

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.

列之间没有边距！

Answer 1

试试这个 CSS

.col {
  padding:20px;
  box-sizing:border-box;
}

Answer 2

我建议您在列中使用单独的元素，例如.col-content：

JSFiddle

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>

Answer 3

最好的方法是使用 Materialize 框架提供的类，它为我们提供了一个类 'offset' 来添加列之间的边距。例如，您可以使用以下代码添加边距。您可以了解有关网格和偏移的更多信息here.

JS Fiddle

CSS

.green {
    background: green;
}
.black {
    background: black;
    color: #fff;
}

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>

Answer 4

我认为您只放置了一个嵌套列。这将在每边添加 0.75rem 的填充。您应该将背景放在嵌套列中。 希望对您有所帮助。

Answer 5

在当前的 Materializecss 版本中，情况并非如此。

为了更好的可视化，我修改了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>

结果将如下所示：

现在假设您不想要填充，那么您必须添加 style="padding:0"

Answer 6

.col 块之间的空格是通过 Materialize 中的填充实现的。所以，.col 元素用于布局。

应该将您的视觉块放置为.col 元素的子元素。

示例——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>

Answer 7

这些答案都没有真正回答您的问题。我确切地知道你的意思。 Materialize（与 Boostrap 不同）没有考虑到您将使用纯色的标题或内容区域，因此它不像 Bootstrap 那样提供“margin-space”：

<div class="col-md-6"><div style="background: blue;">blue</div></div>
<div class="col-md-6"><div style="background: blue;">blue</div></div>

这将在每个边距之间产生大约 15 像素的纯空白，无论您创建多少列。它也很好地降解。

当其他人告诉您只使用一揽子填充解决方案时，他们忘记了页面右侧的列也会有填充，因此会破坏页面右侧的容器行。

我建议根据列数使用@media 查询

如果只有两列，那么可以将所有div上的padding-right设置为15px，但是对于大屏幕的@media查询，设置nth-child(even)（屏幕右侧的所有div内边距为 0px；。

请记住，这仍然会使左侧列 15pix比右侧列更薄，如果您有统一的内容，它会很明显。

从这个意义上说，Materialize 未能提供适当的列布局空白解决方案（使用填充而不是全局边距空间），而 Bootstrap 在这方面做得更好。祝你好运。