ネストされたブートストラップ行と列

Question

こんにちはiは、以下のHTML、CSS、およびブートストラップクラス

を使用して、次のレイアウト

を達成しようとしています

<div class="row"> 
    <div class="col-xs-12 fix-result"> 
     <div class="row"> 
      <p class="fix-result-info">friendly Match | 23 July 2016 | The Muga | KO 14:30 </p> 
      <div class="col-sm-6 text-center"> 
        <p>WON</p> 
        <h4>Team A 2-1 Team B</h4> 
      </div> 
      <div class="col-sm-6 match-details"> 
       <p>goalscorers</p> 
      </div> 
     </div> 
    </div> 
</div> 

.fix-result {padding:10px;border: 1px solid #0359cf; margin-bottom:20px;} 
.fix-result-info { color: #0359cf;text-transform: uppercase; text-align: center;} 
.fix-result .match-details {padding:10px;background-color: #0359cf;} 

フィドル - https://jsfiddle.net/kngsne42/

しかし、青divは親divの範囲外に浮いていて、問題を解決する方法がわかりません。

私が正しく行と列をネストするのですか？

おかげ ポール

Answer 1

私はあなたが巣の行になっているとは思いません。 また、行をコンテナ内に配置する必要があります。

（参照：Bootstrap 3 Grid, do I need a container?）を

次のコードは、トリックを行うようだ：

.fix-result {padding-right:20px;border: 1px solid #0359cf; margin-bottom:20px;} 
 
.fix-result-info { color: #0359cf;text-transform: uppercase; text-align: center;} 
 
.fix-result .match-details {padding:10px;background-color: #0359cf;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row col-xs-12 fix-result"> 
 
     <p class="fix-result-info">friendly Match | 23 July 2016 | The Muga | KO 14:30 </p> 
 
     <div class="col-sm-6 text-center"> 
 
      <p>WON</p> 
 
      <h4>Team A 2-1 Team B</h4> 
 
     </div> 
 
     <div class="col-sm-6 match-details"> 
 
      <p>goalscorers</p> 
 
     </div> 
 
    </div> 
 
</div>

はそれがお役に立てば幸いです。

Answer 2

私はあなたのコード

<div class="row"> 
<div class="col-xs-12"> 
    <div class="row fix-result"> 
     <p class="fix-result-info">friendly Match | 23 July 2016 | The Muga | KO 14:30 </p> 
     <div class="col-sm-6"> 
     <div class="text-center"> 
       <p>WON</p> 
       <h4>Team A 2-1 Team B</h4> 
     </div> 
     </div> 
     <div class="col-sm-6 "> 
     <div class="match-details"> 
      <p>goalscorers</p> 
     </div> 
     </div> 
    </div> 
</div> 

はただのタグに変更を行う更新します。 それは動作します。