Распределите и оправьте bootstrap содержимое строк и столбцов в соответствии с родительским запросом на содержание монет html css - PullRequest
Новая
       37

Распределите и оправьте bootstrap содержимое строк и столбцов в соответствии с родительским запросом на содержание монет html css

1 голос
/ 18 апреля 2020

Таким образом, код выглядит примерно так: 

<section height=“1000px” width=”100%”>
   <div class=" container">
      <div class="row">
         <div class="col-md-12"></div>
      <div class="row">
         <div class="col-md-6"></div>
         <div class="col-md-6"></div>
         <div class="col-md-6"></div>
         <div class="col-md-6"></div>
   </div>
</section>

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

table 1

На это:

table 2

Я видел другой пост, который предлагает использовать «display: flex», чтобы сделать что-то похожее на это, но не совсем. Когда я использую «display: flex», чтобы попытаться использовать более поздние элементы align, тогда информация о bootstrap столбцах пропускается. Благодаря.

1 Ответ

1 голос
/ 19 апреля 2020

Фундаментальный Bootstrap

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

  2. Если вам требуются необычные стили, которые не охватываются классами BS, оставьте их минимальными - желательно для одного элемента с помощью style и / или атрибуты width / height. 

    <main ... height='1000px' style='min-height: 1000px'>...</main>

  3. На верхнем уровне DOM находятся основные теги макета c. Это иерархия, которой следует придерживаться: 

    <body>
  <main class='container'>
    <sector class='row'>
      <!-- col-* | the total of all * cannot exceed 12 per .row -->
      <div class='col-6'></div><div class='col-6'></div>

    Обратите внимание, использование тегов <main> и <section>. Это правильно и нормально семантически, но не обязательно. Я делаю это, чтобы нарушить монотонность <div>, что делает разработчиков подверженными ошибкам (в вашем примере отсутствовал конечный тег). Таким образом, иерархия классов обязательна - альтернативные теги не требуются, но рекомендуются.

  4. В OP HTML .container был обернут в <section> согласно точке # 3, единственный тег, который должен обернуть .container, это <body>. Так что удалите это <section>.

  5. Кроме того, в OP HTML, последнее .row имеет четыре .col-md-6 Общее число за .row должно быть 12. Добавьте еще один .row и переместите в него два из них .col-md-6.

Классы BS

Ниже приводится краткое описание классов BS. использовались встроенные стили и почему:

  • <style>

    • .box::after {content: attr(class);} - отображает теги classList для демонстрационных целей

  • <main>

    • .container - Требуемый макет
    • .d-flex, .flex-column, .align-content-stretch - Делает все .row растянуть по вертикали и равномерно
    • .text-center - все тексты тегов-потомков центрированы из-за наследования
    • Встроенные стили - width='100%' height='1000px' style='min-height: 1000px'
  • <section>
    • .row - Требуемый макет
    • .flex-fill - Обеспечивает равномерное заполнение высоты тега и его родного брата в пределах высоты родительского тега
  • <div>
    • .col-md-12/6 - Требуется ired layout
    • .d-flex, .flex-wrap, .justify-content-center, .align-content-center - Все содержимое внутри будет горизонтально и вертикально центрировано

Также, в конечном итоге вы захотите узнать, как переопределить стили BS (если это не так) - обратитесь к этой статье .

Демо

Примечание : Подробности прокомментированы в демоверсии, просмотрите демоверсию в режиме полной страницы. 

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

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title></title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">

  <!-- External stylesheets go here - these styles will override* styles from 
       preceding stylesheets -->
  <!-- Example: <link href="style.css" rel="stylesheet"> -->

  <!-- Any styles only applying to this page goes into the <style> tag below. 
       These styles will override* any style from a stylesheet -->
  <style>
    body {
      background: #000;
    }
    
    .box::after {
      content: attr(class);
    }
  </style>
</head>

<body>

  <!-- Any inline style (aka style attribute or width/height attribute) overrides*
       external stylesheets and style tags -->
  <!-- *override is guaranteed due to the rules of cascading with the exception of
       !importance and specificity -->  

  <main class="container bg-dark border border-light d-flex flex-column align-content-stretch text-center" width='100%' height='1000px' style='min-height: 1000px'>
    <section class="row flex-fill">
      <div class="box col-md-12 bg-primary border border-dark d-flex flex-wrap justify-content-center align-content-center"></div>
    </section>
    <section class="row flex-fill">
      <div class="box col-md-6 bg-warning border border-dark d-flex flex-wrap justify-content-center align-content-center"></div>
      <div class="box col-md-6 bg-success border border-dark d-flex flex-wrap justify-content-center align-content-center"></div>
    </section>
    <section class="row flex-fill">
      <div class="box col-md-6 bg-danger border border-dark d-flex flex-wrap justify-content-center align-content-center"></div>
      <div class="box col-md-6 bg-info border border-dark d-flex flex-wrap justify-content-center align-content-center"></div>
    </section>
  </main>

  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>

  <!-- All external script files should here -->
  <!-- Example: <script src='script.js'></script> -->

  <script> 
   <!-- Script for just this page belongs -->
  </script>
</body>

</html>
...