React Grid: форматирование разделов внутри столбца
Предположим, у меня есть:
<Grid fluid = {true}>
<Row>
<Col md = {4}>
<section>
// my component
</section>
<section>
// my component
</section>
</Col>
<Col md = {4}>
<section>
// my component
</section>
<section>
// my component
</section>
</Col>
В этой ситуации я вижу в браузере два набора соприкасающихся серых пунктирных прямоугольников с промежутком между ними.
Я пытаюсь сделать так, чтобы эти коробки были плотно упакованы, оставив между ними небольшой промежуток. Затем я хотел бы залить их цветом. Как я могу сделать это с разделом сетки реагирования?
Если я помещаю их в один столбец, они складываются, как в коробке @ChaseDeAnda (все перепробовали.)
Какой пакет react-grid вы используете? Вы можете связать это?
@ChaseDeAnda реакция-бутстрап response-bootstrap.github.io/layout/grid
Ответы 1
Ах, вы хотите поместить каждый раздел в столбец, который равномерно распределен в строке:
<Grid fluid>
<Row>
<Col md = {3}>
<section>
// my component
</section>
</Col>
<Col md = {3}>
<section>
// my component
</section>
</Col>
<Col md = {3}>
<section>
// my component
</section>
</Col>
<Col md = {3}>
<section>
// my component
</section>
</Col>
</Row>
</Grid>
реактивная сетка использует 12-сеточную систему, поэтому вам нужно, чтобы ваши 4 столбца были равномерно распределены по 12 разделам. Итак, 4/12 = 3. Вам понадобится 4 столбца, каждый из которых растягивает 3 раздела.
Да, да, почти все ... Думаю, я вижу решение. Что я хотел бы сделать, так это расположить все столбцы слева - может быть, шесть столбцов с двумя пустыми?
Пока оно равно 12, все в порядке, поэтому пустые столбцы должны добавить к строке "отступ".
Что значит «дисплеи плотно упакованы, между ними лишь небольшой промежуток». иметь в виду? Вы хотите, чтобы между каждым ящиком был одинаковый промежуток? Вы видите разрыв, потому что ваши
sectionразделены на две колонки. Поместите все 4sectionв один<Col>, чтобы устранить зазор.