如何在Bootsrap中製作更大更小的列？

我在我的網頁上有這段代碼，我用Bootstrap製作了它。如何在Bootsrap中製作更大更小的列？

<div class="row"> 
    <div class="col-md-11"> 
    Here I have content 
    </div> 
    <div class="col-md-1"> 
    Here I have content 
    </div> 
</div>

，我需要此列，即第一列更小，10.5大小和第二列要大些，1.5大小。我可以在CSS中使用寬度嗎？你能幫助我嗎？

謝謝

來源

2016-08-02 pulitr

你可以製作你自己的類，並根據需要調整你的CSS的百分比寬度。 –

Bootstrap沒有直接提供部分列。

您可以重寫樣式表以在不同數量的列（即24）上操作。

customize頁面將允許您指定不同數量的列併爲您生成樣式表。

或者，您可以檢出Git中的Bootstrap並修改the variables file以達到相同的效果。

來源

2016-08-02 12:05:41 Quentin

剛剛創建自己的破發點：

@media (min-width: 992px) { 
    col-md-10-5 { 
     width: 9.523809523809524%; // 100/10.5 
    } 

    col-md-1-5 { 
     width: 66.666666666%; // 100/1.5 
    } 
}

替代可以使用Bootstrap generator增加網格大小到24列，而不是12個。

來源

2016-08-02 12:07:20 Justinas

Bootstrap爲您提供通用組件。我相信引導行和列通常被設計爲包含不同的網站部分或不同的功能（例如右列與最新的新聞提要和主體與當前文章）

我想你正在試圖建立自己的組件/標記那不應該被引導行和列分割。我建議爲它編寫自己的CSS。

<div> <!--some container (e.g. bootstrap container or column)--> 
    <div class="my-component"> 
    <div class="main-part"></div> 
    <div class="additional-part"></div> 
    </div> 
</div> 

.my-component { 
    /*something*/ 
} 
.my-component > .main-part { 
    width: 600px; 
    /*some margin or padding*/ 
} 
.my-component > .additional-part { 
    width: 200px; 
    /*some margin or padding*/ 
}

並且在必要時包括媒體查詢。我建議不要重寫框架網格系統。

來源

2016-08-02 13:26:10

如何在Bootsrap中製作更大更小的列？

回答

相關問題