Как настроить размер столбца в React / Bootstrap

Question

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

Когда это загружается на мою страницу, столбец слишком большой. Я хочу сделать его более узким, и, если возможно, я хочу применить атрибут непосредственно внутри div.

Какие атрибуты я могу добавить к имени col-7 и как это правильно сделать?

Answer 1

Я думаю, что вы используете 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/

Answer 2

Сетка

Bootstrap использует 12 столбцов в строке. Вы определяете ширину столбца с помощью синтаксиса className='col-*'.

Просто измените * на количество столбцов из 12, которое вы хотите. Например, div с className='col-6' будет вдвое меньше ширины div с className='col-12'.