如何在 React/Bootstrap 中調整列的大小

Question

<div className={"col-7 name"}>&thinsp;</div>

當這加載到我的頁面時，該列太大了。 我想讓它更窄，如果可能的話，我想直接在 div 內應用一個屬性。

我可以向 col-7 名稱添加哪些屬性，正確的做法是什么？

Answer 1

Bootstrap 的網格系統每行使用 12 列。 您可以使用語法className='col-*'指定列寬。

只需將*更改為您想要的 12 列中的列數。 例如， className='col-6'的 div 將是className='col-12'的 div 寬度的一半。

Answer 2

我認為您正在使用bootstrap

總列數為 12，因此您可以使用col-12

例子：

1. col-8為 1 列， col-4為 1 列

2. col-4用於 3 列

3. col-6用於 2 列

您可以嘗試查看他們的文檔

https://getbootstrap.com/docs/4.4/layout/grid/