如何通過縮小特定寬度尺寸的元素來更好地調節BootStrap的寬度樣式？

使用BootStrap是我一直使用的最大問題，它是使用寬度值的概念。 BootStrap在任何元素上都有col-sm-3（值從3到12，值爲sm,md,lg），最常用於跨度和div元素。 BootStrap還有一套預定義的@media-queries，可根據寬度大小在移動設備上提供響應式外觀。如何通過縮小特定寬度尺寸的元素來更好地調節BootStrap的寬度樣式？

我注意到，有時當我在div，span或任何與網格系統有關的元素上使用固定寬度值時，由於寬度被覆蓋，它不會縮小比例。有時當我分配一個寬度值時，它會在瀏覽器窗口調整大小時縮小。

現在，我想知道和理解，如何充分利用和控制不同寬度尺寸的瀏覽器的寬度值，以便我可以選擇要調整大小/縮放的元素或保持不變，直到剩餘空間已被佔用？

這裏是什麼，我的意思是一個形象的例子：

瀏覽器窗口：884 X 992（單位：像素） Browser Window 884 x 992

正如你可以在上面看到，瀏覽器窗口大小爲884px X 992px和元素完美對齊。現在，當我在770px - 985px的寬度之間調整它稍小（小於992px）時，它看起來像下面的圖片，當給定剩餘空間量時，label標記不應附加，並且input文本字段不應該縮放向下（如下圖所示）。如果有人在這些寬度尺寸之間有一個設備，它看起來不正確。所以，我想要佔用，而不是追加那個尚未填滿的空間。

瀏覽器窗口：884 X 985（單位：像素） Browser Window 884 x 985

注：我不知道，因爲很多東西都是使用寬度值，我想知道正確的，其使用，甚至，在Bootstrap中使用寬度的有效方式，無論是媒體查詢，col-xx-x，某些特定元素的CSS編輯或其他內容。我想一勞永逸地理解！

以下是要展示的bootply：http://www.bootply.com/jXPUMYCxaU將瀏覽器窗口調整爲平板電腦的大小，您將看到我的意思。我只是想讓它看起來不錯，因爲其他調整大小的寬度是可以和一致的！

來源

2014-07-02 TheAmazingKnight

您能快速瞭解您想要的樣子嗎？例如。只需畫出一些你想要的東西的紅色框。您是否希望平板電腦外觀與桌面完全一樣？ – joshhunt

我想讓它看起來像是第一張圖片（尺寸> 992），現在當它<992時，它看起來像第二張圖片，縮放和擠壓裏面的元素，當它不是假設時，給定空間量它仍然離開了。但是，當然，我會添加一個快速的圖像以便更容易地演示。 – TheAmazingKnight

我會嘗試解釋Bootstrap網格結構，我認爲這將幫助您理解問題。

.COL-XX-YY

COL =列選擇

XX（XS，SM，MD，LG）=其中列的寬度適用屏幕寬度，XS < 768px，SM≥768px，MD ≥992px，lg≥1200px。（1,2,3,4,5,6,7,8,9,10,11,12）= 12/yy是以列的百分比表示的寬度。例如12將是12/12 =寬度：100％，6將是6/12 =寬度：50％，3將是3/12 =寬度：25％;

因此，在您的示例中，您使用了col-sm-3，這意味着在任何屏幕寬度≥768px的情況下，其寬度將爲25％。（和屏幕寬度< 768px它將是100％）。所以發生的情況是，你的外部容器正在將寬度從970px改變爲750px，所以你的列也在改變寬度爲25％。

因此，一些可能的解決方案：

添加一個新列類的形式，例如將其更改爲「COL-SM-6 COL-MD-3」，這意味着這將是寬度：50％屏幕寬度≥768px，寬度：25％，屏幕寬度≥992px。
使用自定義的CSS，以便它不是基於一個百分比，可以設置寬度（不推薦）

希望這是有道理的，讓我知道如果您有任何問題。

來源

2014-07-02 21:23:00 joshhunt

您很好地解釋了'.col'類的用法，並且在對它進行實驗之後，我完全掌握了這個概念，並且正是我想要的。我也不知道我可以鏈接在一起，在這種情況下也很有用。非常感謝。 1UP的引導知識。 :) – TheAmazingKnight

從本質上講，我會建議嘗試堅持col- *結構並擺弄它們以獲得正確的結果。一旦你得到了一個處理，如果你需要針對不同瀏覽器窗口大小的特定/不同寬度的特定結構，你需要使用你自己的@media查詢......但是無論如何，只要把一個HTML例子你可以做什麼來控制你的表格佈局，以防止你顯示的截圖的問題，你可以這樣做：

<form class='form-horizontal'> 
    <div class='form-group'> 
    <label class='control-label col-xs-12 col-sm-6, col-md-4'>Label Text</label> 
    <div class='col-xs-12 col-sm-6 col-md-8'> 
     <input class='form-control' /> 
    </div> 
    </div> 
</form>

在移動設備上的標籤會疊加在輸入上面讓他們有全寬度
在平板電腦上，標籤將獲得額外空間的全部一半網格
在普通屏幕和大屏幕上，標籤只佔用1/3的空間步伐

來源

2014-07-02 21:34:24

謝謝你以這種有見地的方式回答。我不知道你可以鏈接在一起來定義不同的寬度尺寸。此外，你回答了我要問的第二個問題，關於通過'@media queries'爲特定的寬度大小使用特定的css樣式。再次感謝！ :) – TheAmazingKnight

如何通過縮小特定寬度尺寸的元素來更好地調節BootStrap的寬度樣式？

回答

相關問題