Question

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

<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

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

JSFiddle

＆＃13;

body {
    color: white;
}

.blue {
    background: blue;
}

.black {
    background: black;
}

＆＃13;

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

＆＃13;

Answer 2

.col块之间的空格是通过Materialise中的填充实现的。因此，.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 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

截至Current 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

这些答案都没有回答你的问题。我确切地知道你的意思。 Materialise（与Boostrap不同）没有考虑到您将使用带有纯色的标题或内容区域，因此它不会提供＆＃34; margin-space＆＃34;像Bootstrap：

private async Task<string> SerializeStrokes(InkCanvas canvas)
{
    IReadOnlyList<InkStroke> currentStrokes = canvas.InkPresenter
                                                    .StrokeContainer
                                                    .GetStrokes();

    if (currentStrokes.Count > 0)
    {
        string serializedString = string.Empty;

        using (IOutputStream outputStream = somethinghere)
        {
            await canvas.InkPresenter.StrokeContainer.SaveAsync(outputStream);
            await outputStream.FlushAsync();
        }

    // use some kind of stream reader to return contents of output ?
    }
    else
    {
        return string.Empty;
    }
}

无论您创建的列数是多少，这都会在每个边距之间产生大约15px的实体空白。它也会很好地降级。

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

我建议使用@media查询，具体取决于列数

如果只有两列，那么你可以在所有div上将padding-right设置为15px，但是对于大屏幕的@media查询，设置nth-child（偶数）（屏幕右侧的所有div）填充为0px;。

请注意，这仍然会使左侧列15pix 更薄而不是右列，如果您有统一的内容，则会很明显。

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

Answer 7

试试这个CSS

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

实现列之间的框架边距

7 个答案: