引導嵌套的行和列不正確堆疊

<div class="container" id="dashboardContainer"> 
    <div class="row"> 
     <div class="col-md-4 col-sm-6 margin-bottom-30"> 
      <a href="" class="lg img-wheel" id=""> 
      Col 1-1 
      </a> 
     </div> 
     <div class="col-md-4 col-sm-6 margin-bottom-30"> 
      <a href="" class="lg img-calendar" id="viewFutureBookings"> 
     Col 1-2 
      </a> 
     </div> 

     <div class="col-md-4 col-sm-12"> 
      <div class="row"> 
       <div class="col-sm-6 col-md-12 margin-bottom-30"> 
        <a href="#" class="sm img-compass" id=""> 
         Col 2-1 
        </a> 
       </div> 
       <div class="col-sm-6 col-md-12"> 
        <a href="#" class="sm img-present" id="referAFriend"> 
Col 2-2 
        </a> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

，當你正在查看md和lg偉大的工程。但問題是當你進入sm佈局時，它會正確放置，但不允許你點擊第一排按鈕。

我找到的解決方案是刪除嵌套的行，但是由於頁邊空白/填充不存在，所以它破壞了我的佈局。

這類問題的建議解決方案是什麼？

來源

2016-02-16 AndrewC

對我工作的罰款 – NooBskie

@NooBskie，安德魯表示768px之間992px視......似乎沒有被工作在Chrome上也是。 –

@DavidWilkinson沒錯。它不適用於該視口大小。它似乎是因爲第三列內嵌的行，但我不知道如何正確解決它。 – AndrewC

我做了以下內容：

#dashboardContainer a { 
    background: red; 
    display: block; 
    border: 1px solid blue; 
    color: white; 
    position: relative; /* Add Position */ 
    z-index: 1; /* Add Stack Order */ 
}

當使用嵌套項目我經常使用的z-index來幫助管理元素的堆疊順序。

複審：

我建議您更新引導CSS文件到最新版本，因爲它似乎它可能在某些瀏覽器中的錯誤使用V3.0.0時

我改變了這種到v3.1.0及更高版本，行問題不再是一個問題。

來源

2016-02-16 10:54:59 tohood87

沒問題@AndrewC，很高興它做到了這個把戲:) – tohood87

雖然我同意這個解決方案的工作原理，但它並沒有解決嵌套行繼承整個父行的整個高度的根本問題......它也沒有解決問題， t似乎是「未來證明」。例如，如果嵌套的行/列中包含的內容發生變化，並且不再是錨點元素，而是按鈕。或者只是靜態文本等... –

嗨大衛，我完全同意你在這方面。進一步審查後，看起來最好的解決辦法是更新到更新版本的Bootstrap CSS。看起來這可能是使用3.0.0的Chrome中的一個錯誤 - 高於3.1.0的任何東西似乎已經消除了這個問題。感謝評論我會確保將來的任何答案我儘可能給予答案。乾杯 – tohood87

爲2-1和2-2的cols你應該改變這樣的

<div class="row"> 
<div class="col-sm-6 col-md-6 margin-bottom-30"> 
<a href="#" class="sm img-compass" id=""> 
Col 2-1 
</a> 
</div>

代碼做同樣爲2-2

來源

2016-02-16 10:57:26

您需要添加float: left到包裝嵌套行的div（我已添加類nested，以便您可以更輕鬆地看到。

在這裏工作：http://codepen.io/samuidavid/pen/JGzwXB

<div class="container" id="dashboardContainer"> 
    <div class="row"> 
     <div class="col-md-4 col-sm-6 margin-bottom-30"> 
      <a href="" class="lg img-wheel" id=""> 
      Col 1-1 
      </a> 
     </div> 
     <div class="col-md-4 col-sm-6 margin-bottom-30"> 
      <a href="" class="lg img-calendar" id="viewFutureBookings"> 
     Col 1-2 
      </a> 
     </div> 

     <div class="col-md-4 col-sm-12 nested"> 
      <div class="row"> 
       <div class="col-sm-6 col-md-12 margin-bottom-30"> 
        <a href="#" class="sm img-compass" id=""> 
         Col 2-1 
        </a> 
       </div> 
       <div class="col-sm-6 col-md-12"> 
        <a href="#" class="sm img-present" id="referAFriend"> 
Col 2-2 
        </a> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

CSS：

@media (min-width: 768px) and (max-width: 992px) { 
    .nested { 
    float: left; 
    } 
}

來源

2016-02-16 11:06:07

問題浮動。你有一塊巨大COL-SM-12蓋前面的兩個塊

解決http://codepen.io/anon/pen/eJXbde

@media (min-width: 992px) { 
    .col-sm-12 { 
     clear: none; 
    } 
} 
@media (min-width: 768px) AND (max-width: 992px) { 
    .col-sm-12 { 
     clear: left; 
    } 
}

來源

2016-02-16 11:11:45 BOLVERIN

引導嵌套的行和列不正確堆疊

回答

相關問題