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

的所有内容应在实际的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