嵌套自舉行和列

嗨，我正在嘗試使用下面的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的範圍之外，我不確定如何解決問題。

我是正確嵌套的行和列？

感謝保羅

來源

2016-08-13 Paul

行只是意味着沒有回車。因爲你已經排成一列了，所以你不應該有另外一個 – neaumusic

最好也是最簡單的方法可能就是簡單地把它看作兩個單獨的行，第一行包含col-12，第二行包含col-12，第二行包含col-6元素。 – CBroe

我不認爲你應該巢行。另外，您應該將行放入容器中。

（參見：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>

希望它能幫助。

來源

2016-08-13 12:45:26 Ahmad

嗨，對不起，我有一個conatiner，但忘了添加到我的例子。我正在查看此頁面上的嵌套列部分http://getbootstrap.com/css/。它似乎嵌套一排。謝謝你的建議，不好意思給它去 – Paul

_「我不認爲你應該嵌套行」_ - 你也不應該在同一個元素上使用'row'和'col-'類。雖然這可能「起作用」，但如果它在稍後或更大範圍內導致附加對齊問題，我不會感到驚訝。 – CBroe

col和row是一個語法錯誤，抱歉。大量的複製和粘貼發生。謝謝指出 – Paul

我更新了你的代碼

<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>

只是做改變的標記。它會工作。

來源

2016-08-13 12:51:38

嵌套自舉行和列

回答

相關問題