Twitter的Bootstrap 3網格，更改斷點和刪除填充

我試圖移動到新的boostrap 3網格，我面臨一些困難。Twitter的Bootstrap 3網格，更改斷點和刪除填充

如何讓網格堆疊到480px以下但不在480px到768px之間？
768px上面的填充左邊的第一個和最後一個填充右邊的是在容器外部，但低於768px填充位於容器內部，所以外觀不同，因爲內容不再與可能的容器對齊以上。
當電網堆疊填充保持但對我來說應該是從0

任何幫助將受到歡迎我米用下面的代碼與引導3 RC1

<div class="container" style="background-color: purple;"> 
container 

</div> 

<div class="container"> 
    <div class="row"> 
     <div style="background-color: red" class="col-4 col-sm-4 col-lg-4"><img data-src="holder.js/100%x200"></div> 
     <div style="background-color: blue" class="col-4 col-sm-4 col-lg-4"><img data-src="holder.js/100%x200"></div> 
     <div style="background-color: green" class="col-4 col-sm-4 col-lg-4"><img data-src="holder.js/100%x200"></div> 
    </div> 
</div>

來源

2013-07-29 fred_

其實對我來說，網格缺少col-ts- *（小到小）類的集合 –

如果您需要更多控制「微小」列的話，這可能是一個選項：https：// gist。 github.com/andyl/6360906。但@otopic的解決方案的寬度：100％;可能很適合大多數人對這種額外/缺少色譜柱尺寸/控制的要求。 –

更新一月2014

參見：https://github.com/twbs/bootstrap/issues/10203

更新2013年8月21日 由於Twitter Bootstrap 3 RC2下面提到的col- *已被重命名爲xs-col- * 現在有四個網格類：xs-col- *（mobile，never stacks），col-sm - *（平板電腦，堆疊低於768像素），col-md- *（筆記本電腦，堆疊低於992像素）和col-lg- *（桌面，堆疊低於1200像素）。

更新 ~~在我以前的答案我使用該表從最近的文檔：~~

~~[舊圖像刪除]~~

~~當我測試這個值如果找到不同的東西：~~

Bootstrap 3 Grid

「col-xs- *」wil總是應用（從不堆疊）
將在768和更高（992px）之間應用「col-sm- *」（堆疊在767）
「col-lg- *」將應用於992和更高（在991棧）

在variables.less，你會發現：

// Media queries breakpoints 
// -------------------------------------------------- 

// Tiny screen/phone 
@screen-tiny:    480px; 
@screen-phone:    @screen-tiny; 

// Small screen/tablet 
@screen-small:    768px; 
@screen-tablet:    @screen-small; 

// Medium screen/desktop 
@screen-medium:    992px; 
@screen-desktop:    @screen-medium;

但似乎沒有成爲一個斷點480像素（或@fred_說，電網缺少同事ts- *（從小到小）一組類）。另請參閱：https://github.com/twbs/bootstrap/issues/9746

要將堆棧點設置爲480px，您必須重新編譯你的css。將@ screen-small設置爲480px;並在此之後定義你的列： <div style="background-color: red" class="col-sm-4">。注意這將改變@ grid-float-breakpoint也會導致它被定義爲@grid-float-breakpoint: @screen-tablet;。

向容器中添加一行時，我發現沒有發現填充問題。

或者試試：http://www.bootply.com/70212它會疊加低於480像素，加入媒體查詢（JavaScript的僅用於說明）

以前的答案

從現在Twitter的引導定義了三個網格：對微型電網電話（< 480px），平板電腦的小網格（< 768px）以及用於Destkops（> 768px）的中大網格。這些網格的行類前綴是「.col-」，「.col-sm-」和「.col-lg-」。中大型網格將疊加在768像素的屏幕寬度以下。小網格也不到480像素，而小網格從不堆疊。

使用「col-4」前綴，網格將永遠不會疊加。所以刪除「col-4」讓你的網格堆疊在480px以下。這也將刪除填充現在是堆棧。

參見：http://bassjobsen.weblogs.fm/migrate-your-templates-from-twitter-bootstrap-2-x-to-twitter-bootstrap-3/和Writing Twitter's Bootstrap with upgrading to v3 in mind

來源

2013-07-29 09:42:02

Thx低音，但它確實有效。與col-4它不堆疊，沒有col-4它開始堆疊一個768px，我希望它開始堆疊低於480px並保持水平以上。在我身邊，它並沒有刪除填充以及 –

感謝您的回覆我現在要看它 –

@fred_從Bass的建議爲我工作的堆疊，請參見http：//www.bootply .com/70143，還要注意當你將顏色應用於相同的元素（即col和col，而不是容器和col）時，填充的外觀。 –

使用類.col-ts-12爲480像素下的所有100％divs，並把這個代碼在bootstrap.css的末尾：

@media (max-width: 480px) { .col-ts-12 { float: none; } }

來源

2013-10-24 13:11:00 otopic

這是一個很好的斷點，但你確實需要爲它添加'width：100％'但是 – keeg

要實現從小到小設備的任何更改，您將需要包含自己的媒體查詢添加您自己的附加斷點。

例如：

@media (max-width: 480px) { 
    .no-float { 
     display:block; 
     float:none; 
     padding:0; 
    } 
}

我不太清楚你正在努力實現這個東西，但是這是你將如何應用樣式在屏幕寬度小於480像素。

來源

2014-01-10 23:04:24

Twitter的Bootstrap 3網格，更改斷點和刪除填充

回答

相關問題