Почему мой код, использующий Bootstrap, не добавляет горизонтальное пространство между строками миниатюр? - PullRequest
Новая
       14

Почему мой код, использующий Bootstrap, не добавляет горизонтальное пространство между строками миниатюр?

0 голосов
/ 30 марта 2019

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

Я попытался переставить div.

он должен автоматически иметь ровное пространство вокруг каждого ногтя большого пальца 

<!---jumbo-->
<div class ="container">
    <div class="jumbotron">
        <h1 class="display-4"><i class="fas fa-camera"></i> Image Gallery</h1>
        <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
    </div>

<!--Images-->

    <div class="row">
        <div class="col-lg-4 col-md-6">
                <img src="web images/darkbutterfly.jpg"class="img-thumbnail">
        </div>

        <div class="col-lg-4 col-md-6">
                <img src="web images/darkbutterfly.jpg" class="img-thumbnail">
        </div>

        <div class="col-lg-4 col-md-6">
                <img src="web images/darkbutterfly.jpg" class="img-thumbnail">
        </div>
    </div>

    <div class="row">
        <div class="col-lg-4 col-md-6">
                <img src="web images/darkbutterfly.jpg"class="img-thumbnail">
        </div>

        <div class="col-lg-4 col-md-6">
                <img src="web images/darkbutterfly.jpg" class="img-thumbnail">
        </div>

        <div class="col-lg-4 col-md-6">
                <img src="web images/darkbutterfly.jpg" class="img-thumbnail">
        </div>
    </div>


    <div class="row">
        <div class="col-lg-4 col-md-6">
                <img src="web images/darkbutterfly.jpg"class="img-thumbnail">
        </div>

        <div class="col-lg-4 col-md-6">
                <img src="web images/darkbutterfly.jpg" class="img-thumbnail">
        </div>

        <div class="col-lg-4 col-md-6">
                <img src="web images/darkbutterfly.jpg" class="img-thumbnail">
        </div>
    </div>




</div>

1 Ответ

0 голосов
/ 30 марта 2019

Если я вас правильно понял, то это должен быть ответ, зацените - https://codepen.io/anon/pen/MRgdgX

<div class ="container">
<div class="jumbotron row">
  <div class="col-12">
    <h1 class="display-4"><i class="fas fa-camera"></i> Image Gallery</h1>
    <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
  </div>
</div>

<div class="row">
    <div class="col-lg-4 col-md-6">
            <img src="https://via.placeholder.com/300" class="img-thumbnail">
    </div>

    <div class="col-lg-4 col-md-6">
            <img src="https://via.placeholder.com/300" class="img-thumbnail">
    </div>

    <div class="col-lg-4 col-md-6">
            <img src="https://via.placeholder.com/300" class="img-thumbnail">
    </div>
</div>

<div class="row">
    <div class="col-lg-4 col-md-6">
            <img src="https://via.placeholder.com/300" class="img-thumbnail">
    </div>

    <div class="col-lg-4 col-md-6">
            <img src="https://via.placeholder.com/300" class="img-thumbnail">
    </div>

    <div class="col-lg-4 col-md-6">
            <img src="https://via.placeholder.com/300" class="img-thumbnail">
    </div>
</div>


<div class="row">
    <div class="col-lg-4 col-md-6">
            <img src="https://via.placeholder.com/300" class="img-thumbnail">
    </div>

    <div class="col-lg-4 col-md-6">
            <img src="https://via.placeholder.com/300" class="img-thumbnail">
    </div>

    <div class="col-lg-4 col-md-6">
            <img src="https://via.placeholder.com/300" class="img-thumbnail">
    </div>
</div>


.row {
  display: flex;
  flex-wrap: wrap;
}
.jumbotron {
  margin: 0 1rem;
}
 img {
  display: flex;
  margin: 1rem;
}
...