MaterializeCSS - 显示在容器外的内容答案

【问题标题】：MaterializeCSS - Content showing outside containerMaterializeCSS - 显示在容器外的内容
【发布时间】：2017-11-20 22:12:07
【问题描述】：

我正在使用 MaterializeCSS 创建布局，我有一个包含 2 行的容器，但任何不在列中的内容都会显示在容器之外。

这是我的代码：-

<div class="container">
    <div style="border: 1px solid #b1b1b1;">

        <div class="row">
            <div class="col s12">Hello</div>
        </div>

        <div class="row">World
            <div class="col s12">Hello</div>
        </div>
    </div>
</div>

这是它的外观：-

Container Layout

为什么会发生这种情况，即使我的内容在容器内并且也应该显示在容器边界内？

编辑：

<div class="add-arena grey lighten-3">
    <div class="row">
        <div class="col s12 center deep-orange white-text">Add Arena</div>
    </div>
    <div class="row">
        <div class="add-arena-image-holder col s4">
            <form action="#">
                <div class="file-field input-field col s11">
                    <div class="btn">
                        <span>File</span>
                        <input type="file">
                    </div>
                    <div class="file-path-wrapper">
                        <input class="file-path validate" type="text">
                    </div>
                </div>
            </form>
        </div>
        <div class="add-arena-description col s8">
            <div class="row">
                <div class="input-field col s6">
                    <input placeholder="What will it be called?" id="first_name" type="text" class="validate">
                    <label for="first_name">Arena Name</label>
                </div>
                <div class="input-field col s6">
                    <input placeholder="Arena Number" id="first_name" type="text" class="validate">
                    <label for="first_name">Arena</label>
                </div>
            </div>
            <div class="row">
                <div class="col s3 right">
                    <a class="waves-effect waves-light btn deep-orange"><i class="material-icons left">send</i>Add</a>
                </div>
            </div>
        </div>
    </div>
</div>

【问题讨论】：

标签： materialize css-frameworks

【解决方案1】：

所有内容都应该在实际的列中，因为行应用负边距以将它们拉伸到全宽。始终将内容放在 col 中。

https://codepen.io/anon/pen/EXZzVr

<div class="container">
    <div style="border: 1px solid #b1b1b1;">

        <div class="row">
            <div class="col s12">Hello</div>
        </div>

        <div class="row">
            <div class="col s12">Hello World</div>
        </div>
    </div>
</div>

你到底想达到什么目标？

看看下面几行：

https://github.com/Dogfalo/materialize/blob/0e13b80f6bfee1700dd2c2aa49494a44c8a61acb/sass/components/_grid.scss#L17-L18

https://github.com/Dogfalo/materialize/blob/0e13b80f6bfee1700dd2c2aa49494a44c8a61acb/dist/css/materialize.css#L3367-L3368

【讨论】：

我又遇到了同样的问题，这次我把所有内容都放在了行和列中，问题仍然存在。我已经添加了代码，请看一下。
我不确定您的意思，发送按钮上有一个额外的“正确”看起来不错。 codepen.io/anon/pen/MoVVva
看看this image，这就是它的样子，注意顶部的“添加竞技场”栏和它下面的内容。添加竞技场行和内容都在行中，但其中一个占用了更多宽度。
无法在 codepen 上重现，至少我在那里看不到。请检查是否添加了任何其他样式，例如不是来自 Materialize 的行上的一些填充或边距。
我查过了，没有添加样式。