2017-06-07 61 views
0

我正在嘗試使用引導程序3創建嵌套佈局。我遵循the tutorial(請參閱有關嵌套的部分)。佈局基本上只包含由單列組成的行,但由於技術原因,我仍然需要嵌套。我目前的版本是in this fiddle使用引導引起的嵌套佈局會導致不對齊

概括地說,我使用交替的行/列的div以實現嵌套:

<div class="row"> 
    <div class="col"> 
    <div class="row"> 
     <div class="col"> 
     Content row 1 (misaligned) 
     </div> 
    </div> 
    </div> 
</div> 

的問題是,內部內容是對準相對於周圍的一個。我懷疑這是因爲行具有負邊界。有沒有辦法解決或規避這個問題?

回答

1

bootstrap 3沒有.col的定義。

TWBS-3#css#grid語法爲:.col-${screen}-${span}其中:

  1. screen = ['xs', 'sm', 'md', 'lg']
  2. span = [1-12]

因此,假設你想與額外的小屏幕來工作,你的HTML應該是這樣的:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<section class="container"> 
 

 
    <div class="row"> 
 
    <div class="col-xs-12"> 
 
     <div class="row"> 
 
     <div class="col-xs-12"> 
 
      Content row 1 (misaligned) 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
</section>

這裏是使用screen = xs

.txt { 
 
    background: cyan; 
 
    height: 20px; 
 
    display: flex; 
 
    margin: 3px 0; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 

 
.row { margin-bottom: 50px; }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<section class="container"> 
 
<div class="row"> 
 
    <div class="col-xs-1"><div class="txt">1</div></div> 
 
    <div class="col-xs-1"><div class="txt">1</div></div> 
 
    <div class="col-xs-1"><div class="txt">1</div></div> 
 
    <div class="col-xs-1"><div class="txt">1</div></div> 
 
    <div class="col-xs-1"><div class="txt">1</div></div> 
 
    <div class="col-xs-1"><div class="txt">1</div></div> 
 
    <div class="col-xs-1"><div class="txt">1</div></div> 
 
    <div class="col-xs-1"><div class="txt">1</div></div> 
 
    <div class="col-xs-1"><div class="txt">1</div></div> 
 
    <div class="col-xs-1"><div class="txt">1</div></div> 
 
    <div class="col-xs-1"><div class="txt">1</div></div> 
 
    <div class="col-xs-1"><div class="txt">1</div></div> 
 
</div> 
 
<div class="row"> 
 
    <div class="col-xs-8"><div class="txt">.col-xs-8</div></div> 
 
    <div class="col-xs-4"><div class="txt">.col-xs-4</div></div> 
 
</div> 
 
<div class="row"> 
 
    <div class="col-xs-4"><div class="txt">.col-xs-4</div></div> 
 
    <div class="col-xs-4"><div class="txt">.col-xs-4</div></div> 
 
    <div class="col-xs-4"><div class="txt">.col-xs-4</div></div> 
 
</div> 
 
<div class="row"> 
 
    <div class="col-xs-6"><div class="txt">.col-xs-6</div></div> 
 
    <div class="col-xs-6"><div class="txt">.col-xs-6</div></div> 
 
</div> 
 

 
</section>

+0

我在OP的代碼中看不到任何'.coll',這是一個錯字嗎? – Swellar

+0

是的,很抱歉,是的。編輯。 – Hitmands

0

官方的例子有沒有自舉稱爲」 .col1" 級。你需要給出適當的列類來擺脫行邊距。嘗試使用打擊代碼

<div class="row"> 
    <div class="col-xs-4 col-sm-4 col-md-4 "> Content row 1</div> 
    <div class="col-xs-4 col-sm-4 col-md-4"> Content row 2 </div> 
    <div class="col-xs-4 col-sm-4 col-md-4"> Content row 3 </div> 
</div>