Строка бутстрапа, равномерно расположенная внутри родителя

-1

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

.myContainer{ 
 
    background-color: lightblue; 
 
    height: 200px; 
 
    
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 

 

 
<div class="container myContainer"> 
 
    <div class="row"> 
 
    <div class="col-xs-9 col-md-7" style="background-color:red;">.col-xs-9 .col-md-7</div> 
 
    <div class="col-xs-3 col-md-5" style="background-color:lavender;">.col-xs-3 .col-md-5</div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-xs-6 col-md-10" style="background-color:lavenderblush;">.col-xs-6 .col-md-10</div> 
 
    <div class="col-xs-6 col-md-2" style="background-color:lightgrey;">.col-xs-6 .col-md-2</div> 
 
    </div> 
 
    <div class="row" style="background-color:lightcyan;"> 
 
    <div class="col-xs-6">.col-xs-6</div> 
 
    <div class="col-xs-6">.col-xs-6</div> 
 
    </div> 
 
</div>

Вот пример HTML-код. Я хочу, чтобы строка div была равномерно распределена по вертикали по мере изменения высоты контейнера. Каждая строка будет иметь несколько столбцов, которые будут содержать фактическое поле данных.

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

Любое предложение?

источник

2016-05-26 Pixelord

Если вы собираетесь показать фрагмент, по крайней мере, поставить некоторые результаты в этом ... –

Просто обновил фрагмент кода с рабочим выходом. – Pixelord

просто проверить этот код и посмотреть, если это то, что вам нужно

<style> 
     .myContainer { 
      display: flex; 
      align-items: center; 
      flex-wrap: wrap; 
      background-color: lightblue; 
      height: 200px; 
     } 

     .row-flex { 
      width: 100%; 
     } 

    </style> 

</head> 

<body> 

    <div class="container myContainer"> 
     <div class="row row-flex"> 
      <div class="col-xs-9 col-md-7" style="background-color:red;">.col-xs-9 .col-md-7</div> 
      <div class="col-xs-3 col-md-5" style="background-color:lavender;">.col-xs-3 .col-md-5</div> 
     </div> 
     <div class="row row-flex"> 
      <div class="col-xs-6 col-md-10" style="background-color:lavenderblush;">.col-xs-6 .col-md-10</div> 
      <div class="col-xs-6 col-md-2" style="background-color:lightgrey;">.col-xs-6 .col-md-2</div> 
     </div> 
     <div class="row row-flex" style="background-color:lightcyan;"> 
      <div class="col-xs-6">.col-xs-6</div> 
      <div class="col-xs-6">.col-xs-6</div> 
     </div> 
    </div> 
</body>

источник

2016-05-26 05:50:31

Строка бутстрапа, равномерно расположенная внутри родителя

ответ

Смежные вопросы