Question

我使用MaterialiseCSS创建布局，我有一个容器，其中包含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

所有内容都应该在实际的cols中，因为行应用负边距以将它们拉伸到整个宽度。始终将内容放在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

MaterialiseCSS - 显示外部容器的内容

1 个答案: