Расстояние между столбцами в ряду

Question

У меня есть страницы с контейнерами, которые содержат строки, содержащие столбцы. Я хотел бы увеличить расстояние между столбцами

Вот код с моей первой страницы. Первый столбец моей второй строки должен иметь размер первых 2 столбцов моей первой строки.

<div class="container">
 <div class="row">
  <div class="col-md-4 card">
    row 1 col 1
  </div>

  <div class="col-md-4 card">
    row 1 col 2
  </div>

  <div class="col-md-4 card">
    row 1 col 3
  </div>
 </div>

 <div class="row">
  <div class="col-md-8 card">
    row 2 col 1
  </div>

  <div class="col-md-4 card">
    row 2 col 2
  </div>
 </div>
</div>

Для моей второй страницы приведен код

 <div class="container">
  <div class="row">
   <div class="col-md-8 card">
    row 1 col 1
   </div>

   <div class="col-md-4 card">
    row 1 col 2
   </div>
  </div>
 </div>

Яэто в настоящее время Текущее поведение

Я хочу расширить пространство между моими столбцами. И что во второй строке, увеличивая мои поля, первый столбец остается выровненным по первым 2 первой строке

Я переделал свою страницу с помощью flex, но все еще не могу выровнять первый столбецмоя вторая строка с первыми 2 из первой строки

 <div class="container">
<h3>Title</h3>

<div fxLayout="row" class="flex-row" fxLayout.xs="column" fxLayoutGap="16px" fxLayoutAlign="center">
  <mat-card class="bloc-section" fxFlex="33.3%">           
    row 1 col 1
  </mat-card>

  <mat-card class="bloc-section" fxFlex="33.3%">           
    row 1 col 2
  </mat-card>

  <mat-card class="bloc-section" fxFlex="33.3%">           
    row 1 col 3
  </mat-card>
</div>

<div fxLayout="row" class="flex-row" fxLayout.xs="column" fxLayoutGap="16px" fxLayoutAlign="center">
  <mat-card class="bloc-section" fxFlex="67%">
    row 2 col 1
  </mat-card>

  <mat-card class="bloc-section" fxFlex="33%">           
    row 2 col 2
  </mat-card>
</div>
</div>

Answer 1

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

В Bootstrap у нас есть 12 столбцов ( на строку ). Это означает, что каждая строка должна быть назначена 12 столбцам

Вы также должны знать, что: Bootstrap 3.
Примечание: в Bootstrap 4 . 1014 *

• xs: экраны шириной менее 768 пикселей
• см: экраны шириной 768 пикселей или более
• md: экраны шириной 992 пикселей или более
• lg: экраны шириной не менее 1200px

Ваш пример:
В первом ряду три равных столбца: 12 / 3 = 4
Во втором ряду у нас есть 2 столбца. Первый столбец = первые два столбца в предыдущей строке: 4 + 4 = 8

Пример для xs: < 768px
Влияет на все размеры.

.row div div{
  		border-radius: 10px;
    	border: 2px solid;
      background:#ddF;
      text-align:center;
    }
  
 	.row.mar{
      margin-top:2px;
    }

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col-xs-4"><div>.col-xs-4</div></div>
    <div class="col-xs-4"><div>.col-xs-4</div></div>
    <div class="col-xs-4"><div>.col-xs-4</div></div>
  </div>
  <div class="row mar">
    <div class="col-xs-8"><div>.col-xs-8</div></div>
    <div class="col-xs-4"><div>.col-xs-4</div></div>
  </div>
</div>

Пример для sm: >= 768px
В результате размер каждого столбца равен 12 (всего). менее 768 пикселей

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col-sm-4"><div style="background:#ddd;">.col-sm-4</div></div>
    <div class="col-sm-4"><div style="background:#ddd;">.col-sm-4</div></div>
    <div class="col-sm-4"><div style="background:#ddd;">.col-sm-4</div></div>
  </div>
  <div class="row">
    <div class="col-sm-8"><div style="background:#ddd;text-align: center;">.col-sm-8</div></div>
    <div class="col-sm-4"><div style="background:#fdd;">.col-sm-4</div></div>
  </div>
</div>

Пользовательский пример:

• Первый ряд:
  Только xs-4. Для всех размеров. Влияет на все размеры, потому что другой размер не определен.
  
• Второй ряд:
  xs-4 and 4 md-7 and 5 lg-6 and 6 (> 1200 (6) и > 992px (7,5) и другие размеры (4)

 	.row div p{
  		border-radius: 10px;
    	border: 2px solid;
      text-align:center;
    }

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<div class="container">
  <div class="row">
    <div class="col-xs-4"><p style="background:#E9F9B9;">All-4</p></div>
    <div class="col-xs-4"><p style="background:#ddd;">All-4</p></div>
    <div class="col-xs-4"><p style="background:#E9FCF9;">All-4</p></div>
  </div>
  <div class="row">
    <div class="col-xs-8 col-md-7 col-lg-6"><p style="background:lavender;">xs-4  md-7  lg-6</p></div>
    <div class="col-xs-4 col-md-5 col-lg-6"><p style="background:#FFF1F4">xs-4  md-5  lg-6</p></div>
  </div>
</div>

---

Использование flexbox

Если вы используете Bootstrap 4, вам не нужен код CSS.

*{
   box-sizing: border-box;
}
.flex-container{
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;  
    background-color: lavender;
}

.col-4,.col-8{
    position: relative;
    width: 100%;
    padding-right: 5px;
    padding-left: 5px;
    box-sizing: border-box;  
}

.col-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}

.col-8{
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
}

.flex-container > div div{
  background:#E4F1F6;
  padding:2px 6px;
  margin:5px;
}

<div class="flex-container">
  <div class="col-4"><div>1</div></div>
  <div class="col-4"><div>2</div></div>
  <div class="col-4"><div>3</div></div>
</div>
<div class="flex-container">
  <div class="col-8"><div>A</div></div>
  <div class="col-4"><div>B</div></div>
</div>

B

.flex-container {
  display: flex;
  align-items: stretch;
}

.flex-container > div {
  background-color: lavender;
  color: black;
  margin: 3px;
  text-align: center;
  width: 33.3%;
  line-height: 75px;
  font-size: 30px;
}

<div class="flex-container">
  <div style="flex-grow: 1">1</div>
  <div style="flex-grow: 1">2</div>
  <div style="flex-grow: 1">3</div>
</div>
<div class="flex-container">
  <div style="flex-grow: 2; width: 67%;">A</div>
  <div style="flex-grow: 1">B</div>
</div>

Answer 2

Вы в основном делаете именно то, что должны. Вы хотите, чтобы загрузочные столбцы md-X обрабатывали большую часть форматирования.

Тем не менее, ваши внутренние элементы - это то, что вы хотите выровнять, точнее, вам, вероятно, следует добавить некоторые:

https://www.w3schools.com/code/tryit.asp?filename=G8K0XRXB2V8B

И HTML / CSS, чтобы это выглядело так:

<style>
    .filler {
        border-radius: 15px;
        border-style: solid;
    }
</style>

<div class="container-fluid">
  <h1>Hello World!</h1>
  <p>Resize the browser window to see the effect.</p>
  <p>The columns will automatically stack on top of each other when the screen is less than 768px wide.</p>
  <div class="row wide-fill">
    <div class="col-sm-4 spacy" style="background-color:lavender;">
        <div class="filler">.col-sm-4</div>
    </div>
    <div class="col-sm-4 spacy" style="background-color:lavenderblush;">
        <div class="filler">.col-sm-4</div>
    </div>
    <div class="col-sm-4 spacy" style="background-color:lavenderblush;">
        <div class="filler">.col-sm-4</div>
    </div>
  </div>
    <div class="row">
    <div class="col-sm-8 spacy" style="background-color:lavender;">
        <div class="filler">.col-sm-8</div>
    </div>
    <div class="col-sm-4 spacy" style="background-color:lavenderblush;">
            <div class="filler">.col-sm-4</div>
      </div>

  </div>
</div>

Answer 3

Вы можете добавить CSS, как это

.container .row {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

И исправить свой шаблон

 <div class="container">
  <div class="row">
   <div class="col-md-4 card">
    row 1 col 1
   </div>

   <div class="col-md-4 card">
    row 1 col 2
   </div>
  </div>
 </div>