Добавьте пространство между столбцами div с одинаковой высотой - PullRequest
Новая
       1

Добавьте пространство между столбцами div с одинаковой высотой

0 голосов
/ 23 декабря 2018

Есть ли способ добавить пробел между div с H3-1 и div, содержащим H3-2.

  • Без использования custom CSS будет предпочтительнее, но это не обязательно.
  • Если возможно, я бы хотел оставить col-sm-6, потому что использование col-sm-5 и offset добавляет больше места, чем я хочу.
  • ml-auto и mr-auto такжеважно, потому что иногда может быть нечетное количество столбцов (которое входит динамически), и его необходимо центрировать. 

@import url(https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css);
<div class="container">
  <div class="row row-eq-height">
    <div class="col-sm-6 border align-top ml-auto mr-auto mt-3 bg-light">
      <div class="m-0 p-2">
        <h3>H3-1</h3>
        <p>sad ajsdha sjhd ajshdjashd jashdj ashdj ashd jashd jashdj ashdj ashdj ashdj ashdjas dashdj asdhjashd ashd as</p>
      </div>
    </div>
    <div class="col-sm-6 border align-top ml-auto mr-auto mt-3 bg-light">
      <div class="m-0 p-2">
        <h3>H3-2</h3>
        <p>asjd asjdh asjdhasj hasjdh jshd jashjas dh jasdha jdh jashdj ashdj shdj ashdj </p>
      </div>
    </div>
    <div class="col-sm-6 border align-top ml-auto mr-auto mt-3 bg-light">
      <div class="m-0">
        <h3>H3-3</h3>
        <p>asd asd asd a</p>
      </div>
    </div>
  </div>
</div>

Ответы [ 3 ]

0 голосов
/ 23 декабря 2018

Я не уверен, почему вы не можете добавить пользовательский CSS, но мне удалось добавить некоторое пространство с помощью гибких макетов загрузчика 4. 

<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<div class="container">
<div class="flex-row row-eq-height d-inline-flex">
    <div class="col-sm-6 border align-top mt-3 bg-light mr-2">
        <div class="m-0 p-2">
            <h3>H3-1</h3>
            <p>sad ajsdha sjhd ajshdjashd jashdj ashdj ashd jashd jashdj ashdj ashdj ashdj ashdjas dashdj asdhjashd ashd as</p>
        </div>
    </div>
    <div class="col-sm-6 border align-top mt-3 bg-light ml-2">
        <div class="m-0 p-2">
            <h3>H3-2</h3>
            <p>asjd asjdh asjdhasj hasjdh jshd jashjas dh jasdha jdh jashdj ashdj shdj ashdj </p>
        </div>
    </div>
</div>
</div>

вы можете увеличивать / уменьшать mr-2 / ml-2, чтобы увеличить левое и правое поля в столбцах начальной загрузки, если вы считаете нужным

0 голосов
/ 23 декабря 2018 

@import url(https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css);
<div class="container">
  <div class="row row-eq-height">
    <div class="col-sm-6 align-top ml-auto mr-auto mt-3 p-0">
      <div class="border border-primary rounded ml-1 mr-1 h-100 p-2 bg-light">
        <h3>H3-1</h3>
        <p>sad ajsdha sjhd ajshdjashd jashdj ashdj ashd jashd jashdj ashdj ashdj ashdj ashdjas dashdj asdhjashd ashd as</p>
      </div>
    </div>
    <div class="col-sm-6 align-top ml-auto mr-auto mt-3 p-0">
      <div class="border border-primary rounded ml-1 mr-1 h-100 p-2 bg-light">
        <h3>H3-2</h3>
        <p>asjd asjdh asjdhasj hasjdh jshd jashjas dh jasdha jdh jashdj ashdj shdj ashdj </p>
      </div>
    </div>
    <div class="col-sm-6 align-top ml-auto mr-auto mt-3 p-0">
      <div class="border border-primary rounded ml-1 mr-1 h-100 p-2 bg-light">
        <h3>H3-3</h3>
        <p>asd asd asd a</p>
      </div>
    </div>
  </div>
</div>
0 голосов
/ 23 декабря 2018

[Больше не актуально] Да, например, изменив классы столбцов с col-sm-6 на col-sm-5 и добавив класс col-md-offset-2 во второй столбец:

[Отредактированный пример для отражения рассматриваемых правок:] 

<!DOCTYPE html>
<html lang="en-us">

<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<div class="container">
<div class="row row-eq-height">
    <div class="col-sm-6  align-top ml-auto mr-auto mt-3 pl-1 pr-1">
        <div class="h-100 bg-light border m-0 p-2 pl-4 pr-4">
            <h3>H3-1</h3>
            <p>sad ajsdha sjhd ajshdjashd jashdj ashdj ashd jashd jashdj ashdj ashdj ashdj ashdjas dashdj asdhjashd ashd as</p>
        </div>
    </div>
    <div class="col-sm-6 align-top ml-auto mr-auto mt-3 pl-1 pr-1">
        <div class="h-100 bg-light border m-0 p-2 pl-4 pr-4">
            <h3>H3-2</h3>
            <p>asjd asjdh asjdhasj hasjdh jshd jashjas dh jasdha jdh jashdj ashdj shdj ashdj </p>
        </div>
    </div>
    <div class="col-sm-6 align-top ml-auto mr-auto mt-3 pl-1 pr-1">
         <div class="h-100 bg-light border m-0 p-2 pl-4 pr-4">
             <h3>H3-3</h3>
             <p>asjd asjdh asjdhasj hasjdh jshd jashjas dh jasdha jdh jashdj ashdj shdj ashdj </p>
            </div>
        </div>
    </div>
</div>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...