实现列之间的框架边距

Question

物化框架带有奇怪的布局（至少对我而言）。我无法在列之间找到任何保证金。 这是我的代码：

<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

最好方式我s使用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.75英里的填充。你应该把你的背景放在嵌套列中。 希望有所帮助。

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

这些答案都不对，实际上回答你的问题。我确切地知道你的意思。Materialise的（不像自举）没有考虑到将要使用的标题或内容领域具有坚实的颜色，所以它不提供“余量空间”像引导：

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

这将产生一种固体无论您创建的列数是多少，每个边距之间的空白大小约为15px。它也很好地降解。

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

我建议使用@media查询取决于有多少列

如果只有两列，那么你可以设置所有的div填充右至15像素，但随后大屏幕的@media查询，设置nth-child（偶数）（屏幕右侧所有div填充0像素;

请记住，这仍然会使左列15pix 更薄比右列，如果你有统一的内容，这将是显而易见的。

从这个意义上说，Materialize失败t o提供适当的列布局空白空间解决方案（使用填充而不是全局空白空间）并且Bootstrap在这方面更好。祝你好运。