MaterializeCSS - 显示在容器外部的内容

Question

我正在使用 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>

Answer 1

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

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

MaterializeCSS - 显示在容器外部的内容

MaterializeCSS - Content showing outside container

css-frameworks

materialize