停止引導.COL包裝undernath

我有我的引導div的一個問題，這是我在更大屏幕上的當前設置：停止引導.COL包裝undernath

------------------------------------ 
|      |  2 | 
      1   ------------ 
|      |  3 | 
------------------------ |   | 
         ------------

我的簡化代碼看起來有點像這樣：

<div class="row"> 
    <div class="col-md-8 col-ms-12 col-sm-12"></div> 
    <div class="col-md-4 col-ms-6 col-sm-6"></div> 
    <div class="col-md-4 col-ms-6 col-sm-6"></div> 
</div>

現在不幸的是，有時Div 2會變大並且會推動Div 3低於Div 1的底部，並且會在底部纏繞。我怎樣才能阻止這種情況，即使Div 1低於Div 3，Div 3仍然保留在右側？我已經嘗試過修復，但它似乎並沒有工作！

P.S我正在使用「ms」中小斷點作爲已安裝的額外斷點。

來源

2016-08-10 UnluckyForSome

有沒有可能是您的自定義'COL-MS-*'斷點導致了問題？ –

我剛剛刪除他們來測試，我仍然得到這個問題，引導意味着保持列通常包裝，然後呢？ – UnluckyForSome

http://www.bootply.com/b2m0PUjBHz - 這是我得到的輸出，這是預期的。你認爲什麼是錯的？ –

當屏幕寬度變爲992px或更多時，您可以將float: right;屬性應用到第三個塊。爲此我定義了一個新的特殊類.pull-md-right。

請檢查結果：

result

/* The heart of the matter */ 
 
@media (min-width: 992px) { 
 
    .pull-md-right { 
 
    float: right !important; 
 
    } 
 
} 
 

 
/* Decorations */ 
 
.row > div:nth-of-type(1) { background: #9c6; min-height: 200px; } 
 
.row > div:nth-of-type(2) { background: #ff0; min-height: 250px; } 
 
.row > div:nth-of-type(3) { background: #f93; min-height: 150px; } 
 
.row > div { 
 
    font-size: 28px; 
 
    font-weight: bold; 
 
    color: #fff; 
 
    padding-top: 6px; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-8 col-sm-12">1</div> 
 
    <div class="col-md-4 col-sm-6">2</div> 
 
    <div class="col-md-4 col-sm-6 pull-md-right">3</div> 
 
    </div> 
 
</div>

來源

2016-08-10 18:00:26

停止引導.COL包裝undernath

回答

相關問題