在Bootstrap中自定義調整大小屏幕中的元素

Question

目前，我在引導中的佈局如下。這在窗口最大化時適用。

col-md-3 | col-md-3 | col-md-3 | col-md-3 | 
col-md-3 | col-md-3 |  col-md-6  | 

然而，當我試圖將其調整到半個屏幕，地方靠近標籤或智能手機的尺寸，就變成：

col-md-3 
col-md-3 
col-md-3 
col-md-3 
col-md-3 
col-md-3 
col-md-6 

現在我想實現當屏幕被最小化，以一維到一個標籤的是：

col-md-3 | col-md-3 | 
col-md-3 | col-md-3 | 
col-md-3 | col-md-3 | 
     col-md-6  | 

我想要的元素被一個堆疊在另一個之下，當它被最小化到一個尺寸到智能電話的，就像它是HAPP目前正在進行中。

我在網上查找了一些示例代碼，但它沒有幫助我。有人可以給我一些關於如何解決這個問題的建議嗎？

這是我當前的代碼：與自適應版式

<div class="col-md-12" id="awards-logo"> 
 
    <div class="row"> 
 
    <div class="col-md-3" id="logo-one"><span class="helper"></span><img class="img-responsive" src="{{ asset('bundles/app/images/home/awards/exist.png') }}" data-toggle="tooltip" title="{{ 'about-us.awards.exist'|trans }}" alt="" /></div> 
 
    <div class="col-md-3" id="logo-two"><span class="helper"></span><img class="img-responsive" src="{{ asset('bundles/app/images/home/awards/esf.jpg') }}" data-toggle="tooltip" title="{{ 'about-us.awards.esf'|trans }}" alt="" /></div> 
 
    <div class="col-md-3" id="logo-three"><span class="helper"></span><img class="img-responsive" src="{{ asset('bundles/app/images/home/awards/eu.png') }}" data-toggle="tooltip" title="{{ 'about-us.awards.eu'|trans }}" alt="" /></div> 
 
    <div class="col-md-3" id="logo-four"><span class="helper"></span><img class="img-responsive" src="{{ asset('bundles/app/images/home/awards/bmwi.jpg') }}" data-toggle="tooltip" title="{{ 'about-us.awards.bmwi'|trans }}" alt="" /></div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-md-3" id="logo-five"><span class="helper"></span><img class="img-responsive" src="{{ asset('bundles/app/images/home/awards/baystartup.jpg') }}" data-toggle="tooltip" title="{{ 'about-us.awards.baystartup'|trans }}" alt="" /></div> 
 
    <div class="col-md-3" id="logo-six"><span class="helper"></span><img class="img-responsive" src="{{ asset('bundles/app/images/home/awards/grm.jpg') }}" data-toggle="tooltip" title="{{ 'about-us.awards.grm'|trans }}" alt="" /></div> 
 
    <div class="col-md-6" id="logo-seven"><span class="helper"></span><img class="img-responsive" src="{{ asset('bundles/app/images/home/awards/lmu.jpg') }}" data-toggle="tooltip" title="{{ 'about-us.awards.lmu'|trans }}" alt="" /></div> 
 
    </div> 
 
</div>

Answer 1

嘗試添加COL-XS-*類，這樣你就可以控制智能手機網的行爲。 我想你想實現的是：

<div class="col-md-12 col-xs-12" id="awards-logo"> 
     <div class="row"> 
     <div class="col-md-3 col-xs-6" id="logo-one"><span class="helper"></span><img class="img-responsive" src="{{ asset('bundles/app/images/home/awards/exist.png') }}" data-toggle="tooltip" title="{{ 'about-us.awards.exist'|trans }}" alt="" /></div> 
     <div class="col-md-3 col-xs-6" id="logo-two"><span class="helper"></span><img class="img-responsive" src="{{ asset('bundles/app/images/home/awards/esf.jpg') }}" data-toggle="tooltip" title="{{ 'about-us.awards.esf'|trans }}" alt="" /></div> 
     <div class="col-md-3 col-xs-6" id="logo-three"><span class="helper"></span><img class="img-responsive" src="{{ asset('bundles/app/images/home/awards/eu.png') }}" data-toggle="tooltip" title="{{ 'about-us.awards.eu'|trans }}" alt="" /></div> 
     <div class="col-md-3 col-xs-6" id="logo-four"><span class="helper"></span><img class="img-responsive" src="{{ asset('bundles/app/images/home/awards/bmwi.jpg') }}" data-toggle="tooltip" title="{{ 'about-us.awards.bmwi'|trans }}" alt="" /></div> 
     </div> 
     <div class="row"> 
     <div class="col-md-3 col-xs-6" id="logo-five"><span class="helper"></span><img class="img-responsive" src="{{ asset('bundles/app/images/home/awards/baystartup.jpg') }}" data-toggle="tooltip" title="{{ 'about-us.awards.baystartup'|trans }}" alt="" /></div> 
     <div class="col-md-3 col-xs-6" id="logo-six"><span class="helper"></span><img class="img-responsive" src="{{ asset('bundles/app/images/home/awards/grm.jpg') }}" data-toggle="tooltip" title="{{ 'about-us.awards.grm'|trans }}" alt="" /></div> 
     <div class="col-md-6 col-xs-12" id="logo-seven"><span class="helper"></span><img class="img-responsive" src="{{ asset('bundles/app/images/home/awards/lmu.jpg') }}" data-toggle="tooltip" title="{{ 'about-us.awards.lmu'|trans }}" alt="" /></div> 
     </div> 
    </div> 

欲瞭解更多信息，在看here「混合：移動和桌面」部分。

Answer 2

的方式引導交易，是指將各種課程，其目標定位於不同的斷點的元素。那麼，要實現你所描述的行爲，你需要這樣的結構：

<div class="col-md-3 col-sm-6"></div> 

這意味着此列會佔據媒體的屏幕畫面的1/4（我記得dont't確切像素門檻Bootstrap正在使用），在小屏幕上它將佔用1/2的空間。

Answer 3

更改col-md-3到col-md-3 col-xs-6和col-md-6到col-md-6 col-xs-12。

演示：http://jsfiddle.net/0z3nso2k/2/