Блог

Главная - Вопросы по программированию - Равномерно распределить вложенные строки / столбцы в Bootstrap?

Равномерно распределить вложенные строки / столбцы в Bootstrap?

#html #css

Вопрос:

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

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

 body, head {
  width: 100%;
  height: 100%;
}

div {
  padding: 1em;
  border: 1px dotted black;
}

img {
  height: 100%;
  max-width: 100%;
  display: block;
  margin: auto;
} 
 <html>
<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <link href="styles.css" rel="stylesheet">
</head>
<body>
  <div class="main">
    <div class="row d-flex flex-row">
      <div class="col d-flex flex-column justify-content-center">
        <div class="inner-row d-flex justify-content-center">
          <div class="item">
            <img src="https://source.unsplash.com/300x300"/>
          </div>
          <div class="item">
            <img src="https://source.unsplash.com/300x300"/>
          </div>
          <div class="item">
            <img src="https://source.unsplash.com/300x300"/>
          </div>
        </div>
    </div>
      <div class="col d-flex flex-column justify-content-center">
        <div class="inner-row d-flex justify-content-center">
          <div class="item">
            <img src="https://source.unsplash.com/300x300"/>
          </div>
          <div class="item">
            <img src="https://source.unsplash.com/300x300"/>
          </div>
        </div>
      </div>
    </div>
    <div class="row d-flex flex-row">
      <div class="col d-flex flex-column justify-content-center">
        <div class="inner-row d-flex justify-content-center">
          <div class="item">
            <img src="https://source.unsplash.com/300x300"/>
          </div>
          <div class="item">
            <img src="https://source.unsplash.com/300x300"/>
          </div>
          <div class="item">
            <img src="https://source.unsplash.com/300x300"/>
          </div>
          <div class="item">
            <img src="https://source.unsplash.com/300x300"/>
          </div>
          <div class="item">
            <img src="https://source.unsplash.com/300x300"/>
          </div>
          <div class="item">
            <img src="https://source.unsplash.com/300x300"/>
          </div>
        </div>
    </div>
      <div class="col d-flex flex-column justify-content-center">
        <div class="inner-row d-flex justify-content-center">
        </div>
      </div>
    </div>
  </div>
</body>
</html>

JSFiddle

Метки: