Materialize CSSの要素のサイズを正しく調整する方法

私はアプリケーションを開発していますが、マテリアライズCSSを使用しています。私はかなりブートストラップに慣れていて、多くの困難を抱えています。そのうちの1つはグリッドの要素のサイズを変更しています。ブートストラップでは、グリッド要素はそれ自体で整列しますが、マテリアライズでは要素がすべてここにあり、私はそれに非常に苛立っています。 4つのボタンは、小さな画面上でお互いに重なり、また、テキストが大きい場合、ボタンラベルテキストはボックスの外に出る。私は何か間違っているのですか？要素が重なり合わないようにするにはどうすればよいですか？助けをお待ちしています。 OBS：統合されたスニペットtrowsエラーが、ここでは、このリンクでは正常に動作します：https://jsfiddle.net/5bq5gpdh/4/Materialize CSSの要素のサイズを正しく調整する方法

$(document).ready(function() { 
 
     //$('.tap-target').tapTarget('open'); 
 

 
     let valorAposta = $('#valorAposta').val(); 
 
     $('#valorPremio').val(valorAposta); 
 
     appendPartidas(); 
 
     //$('.collapsible').collapsible(); 
 
    });

* { 
 
    font-family: 'Roboto'; 
 
    color: #7C7C7D; 
 
    font-size: 18px; 
 
} 
 

 
body { 
 
    background-image: url(../img/background.png); 
 
} 
 

 
/* fallback */ 
 
@font-face { 
 
    font-family: 'Material Icons'; 
 
    font-style: normal; 
 
    font-weight: 400; 
 
    src: url(https://fonts.gstatic.com/s/materialicons/v31/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2'); 
 
} 
 
    
 
.material-icons { 
 
    font-family: 'Material Icons'; 
 
    font-weight: normal; 
 
    font-style: normal; 
 
    font-size: 24px; 
 
    line-height: 1; 
 
    letter-spacing: normal; 
 
    text-transform: none; 
 
    display: inline-block; 
 
    white-space: nowrap; 
 
    word-wrap: normal; 
 
    direction: ltr; 
 
    -webkit-font-feature-settings: 'liga'; 
 
    -webkit-font-smoothing: antialiased; 
 
} 
 

 
.waves-effect.waves-primary .waves-ripple { 
 
    background-color: #007bff !important; 
 
} 
 

 
.collapsible-header { 
 
    padding: 0 32px !important; 
 
} 
 

 
.scm-primary { 
 
    background-color: #007bff !important; 
 
} 
 

 
.scm-secondary { 
 
    background-color: #7C7C7D !important; 
 
} 
 

 
.scm-dropdown-bg { 
 
    background-color: #ddd !important; 
 
} 
 

 
.white-text { 
 
    color: white !important; 
 
} 
 

 
.scm-parent-width { 
 
    position: absolute; 
 
    width: 100%; 
 
    left: 0%; 
 
    margin-bottom: 30px; 
 
} 
 

 
.scm-content-padding { 
 
    padding-top: 40px !important; 
 
} 
 

 
/*=================HOME=================*/ 
 
.card .small-card { 
 
    padding: 8px; 
 
    padding-bottom: 0px; 
 
} 
 

 
.big-text { 
 
    font-size: 1.3rem !important; 
 
} 
 

 
.small-text { 
 
    font-size: 1.1rem !important; 
 
} 
 

 
.painel-aposta { 
 
    width: 100%;  
 
    margin-top: 55px; 
 
    position: fixed; 
 
    top: 0px; 
 
    left: 0px; 
 
    right: 0px; 
 
    z-index: 2; 
 
} 
 

 

 
.row.remove-after-row::after, .row.remove-after-row { 
 
    content: none !important; 
 
} 
 

 
.match-panel-padding { 
 
    padding: 2px !important; 
 
} 
 

 
.parent-width { 
 
    width: 100% !important; 
 
} 
 

 
.no-padding { 
 
    padding: 0; 
 
    margin: 0 !important; 
 
} 
 

 
.no-bottom-margin { 
 
    margin-bottom: 0px !important; 
 
} 
 

 
.scm-card-content { 
 
    padding: 5px !important; 
 
    background-color: #F4F4F4; 
 
    box-shadow: none !important; 
 
} 
 

 
.scm-match-card { 
 
    border: 1px solid #007bff; 
 
} 
 

 
.scm-primary-text { 
 
    color: #007bff !important; 
 
} 
 

 
.scm-league-action { 
 
    padding: 0px 0px !important; 
 
} 
 

 
.scm-odd-button { 
 
    border: 1px solid #D6D6D6; 
 
    color: #666; 
 
    float: left; 
 
    height: 60px; 
 
    line-height: 30px; 
 
    margin: 10px 0 0 10px; 
 
    text-align: center; 
 
    width: 100px; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet"/> 
 
<body> 
 
    <div id="homeBody"> 
 

 
     <div class="row"> 
 
      <div class="col s12 m12 no-padding"> 
 
       <div class="card"> 
 
        <div class="card-content white-text center-align scm-primary scm-card-content"> 
 
         Europe - Champions League 
 
        </div> 
 
        <div class="card-action no-padding"> 
 
         
 
         <!-- Partidas --> 
 
         <div class="row no-padding"> 
 
          <div class="col s12 m12"> 
 
           <div class="card scm-match-card"> 
 
            <div class="card-content scm-card-content"> 
 
             <div class="row no-padding"> 
 
              <div class="col s8 small-text scm-primary-text">Paris Saint Germain X Atlético de Madrid</div> 
 
              <div class="col s4 right small-text right-align scm-primary-text">30/12 - 15:00</div> 
 
             </div> 
 
            </div> 
 
            <div class="card-action center-align scm-card-content"> 
 
             
 
             <div class="row"> 
 
              <div class="col s3 m3 l4"> 
 
               <a class="scm-odd-button"> 
 
                <span> 
 
                 <strong>2,00</strong> 
 
                 <br> 
 
                 <small>Home</small> 
 
                </span> 
 
               </a> 
 
              </div> 
 
    
 
              <div class="col s3 m3 l4"> 
 
               <a class="scm-odd-button"> 
 
                <span> 
 
                 <strong>2,00</strong> 
 
                 <br> 
 
                 <small>Away</small> 
 
                </span> 
 
               </a> 
 
              </div> 
 
    
 
              <div class="col s3 m3 l4"> 
 
               <a class="scm-odd-button"> 
 
                <span> 
 
                 <strong>2,00</strong> 
 
                 <br> 
 
                 <small>Paris Saint Germain/Atlético de Madrid</small> 
 
                </span> 
 
               </a> 
 
              </div> 
 

 
              <div class="col s3 m3 l4"> 
 
               <a class="scm-odd-button"> 
 
                <span> 
 
                 <strong>+</strong> 
 
                 <br> 
 
                 <small>More</small> 
 
                </span> 
 
               </a> 
 
              </div> 
 
             </div> 
 

 
            </div> 
 
           </div> 
 
          </div> 
 
         </div> 
 

 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 

 
    </div> 
 
</body>

出典

2017-12-28 Guilherme Ramalho