引導電網系統responisve實用

我嘗試googleing一無所獲所以在這裏我'引導電網系統responisve實用

比方說u有這個

<div class="resizable"> 
    <div class='row'> 
     <div class='col-xs-12 col-md-4' style='border:1px solid red;'> HELLo </div> 
    </div> 
</div>

這項工作預計在> MD篩選山坳將採取33％，但我的問題是。

有沒有辦法讓Col-md/col-xs的容器響應者在調整大小的情況下不會進入視口？

我在想一個簡單的JS的解決方案，它開始調整DIV，纔可以記錄的.resizable當前寬度和操作COL-XS的，通過去除或根據調整完成後的新尺寸readding COL-MD。

但是如果已經存在的東西或更好的解決方案，我會喜歡，如果你分享它。

感謝

目前的解決方案：

作爲即時通訊的使用jQuery UI的調整大小我寫的東西很簡單：

$(document).on('resizestop','.resizable',function(){ 

     $(this).find('.row').each(function(){ 
     var w = $(this).innerWidth(); 
     var c=$(this).children('div'); 
     if(w <= 768){ 
      c.attr('class', c.attr('class').replace(' col-md-',' w-col-md-')); 
      c.attr('class', c.attr('class').replace(' col-sm-',' w-col-sm-')); 
      c.attr('class', c.attr('class').replace(' col-lg-',' w-col-lg-')); 
     }else if(w < 960){ 
      c.attr('class', c.attr('class').replace(' w-col-sm-',' col-sm-')); 
      c.attr('class', c.attr('class').replace(' col-md-',' w-col-md-')); 
      c.attr('class', c.attr('class').replace(' col-lg-',' w-col-lg-')); 
     }else if(w >= 960){ 
      c.attr('class', c.attr('class').replace(' w-col-sm-',' col-sm-')); 
      c.attr('class', c.attr('class').replace(' w-col-lg-',' col-lg-')); 
      c.attr('class', c.attr('class').replace(' w-col-md-',' col-md-')); 
     } 
     }); 
    });

這只是刪除所有COL-MD，COL-LG如果父母的寬度小於XX px，並且如果其較大則恢復它。

讓我知道你對這種方法的看法:)。

請注意，這決定col-xs是類中的第一個類，其他任何響應類都遵循這個類。謝謝

來源

2014-02-25 Zalaboza

我不確定我是否理解你的問題。您可能正在尋找Media Queries for Elements。

我期望你的引導佈局是流暢的（與.container-fluid）。當您的resizable已被定義爲視口的百分比時（例如，包含在col-md-9中，該視口在.container-fluid內佔有視口的75％），您應該能夠爲您的元素定義一組新的斷點（或.resizable）。

例如，當.resizable已經包裹在一個col-md-6其寬度將視口的50％，所以它的大小將是>比768px當視口>（768×2）現在可以定義媒體查詢那種情況@media (min-width: 1536px) {}這是真的，當寬度爲.resizable> 768px。

例如

HTML

<div class="container-fluid"> 
<div class="col-md-9"> 
    <div class="resizable"> 
    <div class="row"> 
     <div class="col" style="border:1px solid red;"> HELLo </div> 
     <div class="col" style="border:1px solid red;"> HELLo </div> 
     <div class="col" style="border:1px solid red;"> HELLo </div> 
    </div> 
</div> 
</div> 
<div class="col-md-3"> 
    Right side 
</div> 
</div>

CSS

.resizable .row .col { 
width:100%; 
     } 
@media (min-width:1024px) { 
/* (768 * 12)/9 */ 
.resizable .row .col { 
    width:50%; 
    float:left; 
      }    
} 
@media (min-width:1280px) { 
/* (960 * 12)/9 */ 
.resizable .row .col { 
    width:33.33%; 
    float:left; 
    }    
}

參見：http://www.bootply.com/YHigazGje5

來源

2014-11-10 17:37:41

引導電網系統responisve實用

回答

相關問題