Используя grid в bootstrap 3, создавая галерею изображений, используя класс col-lg-4 и добавляя 6 изображений в одну строку, я получаю пустые пробелы - PullRequest
Новая
       8

Используя grid в bootstrap 3, создавая галерею изображений, используя класс col-lg-4 и добавляя 6 изображений в одну строку, я получаю пустые пробелы

0 голосов
/ 31 января 2020

Я новичок ie в CSS и Bootstrap и пытался создать галерею изображений с использованием Bootstrap Grid, в которой я использую класс One row и под которым я Я использую col-lg-4 класс для 3 столбцов в контейнере, и если я использую 2 отдельные строки, то сетка работает так, как я хочу.

, но если я использую только один класс строк, то первые 3 изображения расположены правильно, как я хочу, и если я добавляю четвертое изображение в той же строке, то изображение должно автоматически переместиться во второй ряд, и оно также перемещается во втором ряду, но во втором столбце, а не в первом. По этой причине изображения расположены неправильно. Кто-нибудь может объяснить? и скажите мне, что я делаю не так?

ниже приведен код html. 

body {
  font-family: "Bebas Neue";
}

.navbar-brand {
  letter-spacing: 2px;
}
.nav {
  letter-spacing: 2px;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Linking Bootstrap CSS -->

    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
      integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
      crossorigin="anonymous"
    />

    <!-- LINKING JQuery -->
    <script src="https://code.jquery.com/jquery-3.4.1.js"
      integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
      crossorigin="anonymous"></script>

    <!-- Linking Bootstrap JAVASCRIPT -->

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
      integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
      crossorigin="anonymous"></script>

    <link href="https://fonts.googleapis.com/css?family=Bebas+Neue&display=swap" rel="stylesheet"/>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Image Gallery</title>
  </head>
  <body>
    <nav class="navbar navbar-inverse navbar-static-top">
      <div class="container">
        <div class="navbar-header">
          <button
            type="button"
            class="navbar-toggle collapsed"
            data-toggle="collapse"
            data-target="#bs-nav-demo"
            aria-expanded="false"
          >
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a href="#" class="navbar-brand"><strong>J.Photography</strong></a>
        </div>
        <div class="collapse navbar-collapse" id="bs-nav-demo">
          <ul class="nav navbar-nav">
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Sign Up</a></li>
            <li><a href="#">Login</a></li>
          </ul>
        </div>
      </div>
    </nav>

    <div class="container">
      <div class="jumbotron">
        <h1>The Image gallery</h1>
        <p>A bunch of beautiful Pictures from Around the Globe!</p>
      </div>
      <div class="row">
        <div class="col-lg-4">
          <div class="thumbnail">
            <img
              src="https://d37b3blifa5mva.cloudfront.net/000_clients/1431025/page/1431025kkXelCOx.jpg"
              alt=""
            />
          </div>
        </div>
        <div class="col-lg-4">
          <div class="thumbnail">
            <img
              src="https://d37b3blifa5mva.cloudfront.net/000_clients/1431025/page/1431025Oq0YQLZZ.jpg"
              alt=""
            />
          </div>
        </div>
        <div class="col-lg-4">
          <div class="thumbnail">
            <img
              src="https://d37b3blifa5mva.cloudfront.net/000_clients/1431025/page/1431025u5zYFC6n.jpg"
              alt=""
            />
          </div>
        </div>
        <div class="col-lg-4">
          <div class="thumbnail">
            <img
              src="https://d37b3blifa5mva.cloudfront.net/000_clients/1431025/page/1431025kkXelCOx.jpg"
              alt=""
            />
          </div>
        </div>
        <div class="col-lg-4">
          <div class="thumbnail">
            <img
              src="https://d37b3blifa5mva.cloudfront.net/000_clients/1431025/page/1431025Oq0YQLZZ.jpg"
              alt=""
            />
          </div>
        </div>
        <div class="col-lg-4">
          <div class="thumbnail">
            <img
              src="https://d37b3blifa5mva.cloudfront.net/000_clients/1431025/page/1431025u5zYFC6n.jpg"
              alt=""
            />
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

1 Ответ

0 голосов
/ 31 января 2020

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

...