引導程序 - 僅在小型設備上有行

對於我的計劃頁面，我使用的面板包含每個計劃提供的內容。引導程序 - 僅在小型設備上有行

我遇到的問題是，因爲每個面板的大小不同，當你在移動中查看它看起來是這樣的：

<div class="row"> 
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3"> 
     <div class="panel"> <!-- Panel 1 --> </div> 
    </div> 
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3"> 
     <div class="panel"> <!-- Panel 2 --> </div> 
    </div> 
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3"> 
     <div class="panel"> <!-- Panel 3 --> </div> 
    </div> 
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3"> 
     <div class="panel"> <!-- Panel 4 --> </div> 
    </div> 
</div>

我希望它看起來像這樣：

<!-- This is how I attempted to do it --> 
<div class="row"> 
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3"> 
     <div class="panel"> <!-- Panel 1 --> </div> 
    </div> 
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3"> 
     <div class="panel"> <!-- Panel 2 --> </div> 
    </div> 
</div> 
<div class="row"> 
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3"> 
     <div class="panel"> <!-- Panel 3 --> </div> 
    </div> 
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3"> 
     <div class="panel"> <!-- Panel 4 --> </div> 
    </div> 
</div>

但是，當我那樣做，它看起來像這樣的大屏幕上：

如何能夠做到在小屏幕上2同事和同事4在大屏幕上，而無需重複我的代碼並使用hidden- *和visible- *作爲行？

下面是該頁面的bootply：http://www.bootply.com/POHPsCRmmM

來源

2015-08-31 Austin Perez

您可以創建代碼演示嗎？ –

@ManojKumar我爲你添加了一個bootply :) –

爲什麼你不使用最小高度？ – WebArtisan

在這裏你去：

Bootply

我把它通過拆分左邊兩個div元素，右兩種div元素在自己各自的容器來工作。然後我用的col-lg，col-md和col-sm組合來實現你想要的效果：

 <div class="letter-space"> 
      <div class="row"> 
       <div class="col-lg-6 col-md-12 col-sm-12"> 
       <div class="col-md-6 col-sm-12 col-nopadding padding-top padding-bottom text-center text-center"> 
        <div class="panel panel-default"> 
         <div class="panel-heading purple"> 
          <h1 class="panel-title fat">Free</h1> 
          <small>$0 <i>for life</i></small> 
         </div> 
         <div class="panel-body grey"> 
          Full access 
          <hr class="hr-line"> 
          New free sounds every month 
          <hr class="hr-line"> 
          <div class="click" tooltips="" tooltip-html="<center><strong>Free support in our forums</strong> <br> support.resonanceinn.com</center>" tooltip-size="small"> 
           <span>Community Support</span> 
          </div> 
          <hr class="hr-line"> 
          <a class="btn btn-primary-white btn-lrg btn-block margin-top" href="/register">Free</a> 
         </div> 
        </div> 
       </div> 
       <div class="col-md-6 col-sm-12 col-nopadding padding-top padding-bottom text-center text-center"> 
        <div class="panel panel-default"> 
         <div class="panel-heading"> 
          <h1 class="panel-title fat letter-space">Deluxe</h1> 
          <small>$9.99/<i>month</i></small> 
         </div> 
         <div class="panel-body"> 
          30 sounds a month 
         </div> 
        </div> 
       </div> 
       </div> 


     <div class="col-lg-6 col-md-12 col-sm-12"> 
       <div class="col-md-6 col-sm-12 col-nopadding padding-top padding-bottom text-center"> 
        <div class="panel panel-default"> 
         <div class="panel-heading"> 
          <h1 class="panel-title fat letter-space">Suite</h1> 
          <small>$19.99/<i>month</i></small> 
         </div> 
         <div class="panel-body"> 
          300 Sounds a month 
         </div> 
        </div> 
       </div> 


       <div class="col-md-6 col-sm-12 col-nopadding padding-top padding-bottom text-center"> 
        <div class="panel panel-default"> 
         <div class="panel-heading"> 
          <h1 class="panel-title fat letter-space">Penthouse</h1> 
          <small>$199/<i>year</i></small> 
         </div> 
         <div class="panel-body"> 
          Unlimited 
         </div> 
        </div> 
       </div> 
      </div> 
      </div> 
     </div> 
    </div>

來源

2015-08-31 18:35:29

謝謝！這正是我想要做的。 –

嘗試是這樣的：

<div class="row"> 
    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6"> 
     <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6"> 
      <div class="panel"> <!-- Panel 1 --> </div> 
     </div> 
     <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6"> 
      <div class="panel"> <!-- Panel 2 --> </div> 
     </div> 
    </div> 
    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6"> 
     <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6"> 
      <div class="panel"> <!-- Panel 3 --> </div> 
     </div> 
     <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6"> 
      <div class="panel"> <!-- Panel 4 --> </div> 
     </div> 
    </div> 
</div>

bootply：http://www.bootply.com/G9NGCPoOKe

希望工程爲您服務！

來源

2015-08-31 18:27:40 AxelWass

這是一個很古老的問題，它已經有一個公認的答案;我想要更流暢的設計（並且我的用例與您的實際情況不匹配），所以我想出了一個不同的解決方案，只是想在這裏記錄它的後代。

Bootstrap列基於float: left，這就是爲什麼當列包裝時左邊的列高於右邊時會出現奇怪的佈局。在這種情況下，如果空間允許，瀏覽器會嘗試將它放在更靠右的位置，然後再將它移到下一行。

你不想複製你的列和使用可見/隱藏類，但是有另一種選擇使用可見/隱藏類，利用這些是浮動容器的事實。 CSS的財產clear迫使一個容器被移動到所有浮動容器的下方（值爲left將其移動到低於所有浮動，right低於所有浮動和both低於所有浮動，左或右）。所以，你可以將你的列對之間的以下內容：

<div class="visible-sm visible-xs" style="clear: both;"></div>

你會得到同樣的效果，但較少的複雜性，雖然也許不是最潔淨的引導方式。

來源

2015-12-18 09:33:16 falstro

引導程序 - 僅在小型設備上有行

回答

相關問題