Как изменить размер смещения в bootstrap 4 сетках?

Question

Я использую bootstrap 4 в моем приложении Angular 8. На моей главной странице у меня есть два компонента размером md-5 и md-6, и я хочу разделить их, используя offset-md-1. Но размер смещения велик, и я не хочу, чтобы между моими компонентами было так много места. Как мне уменьшить размер offset? Будет ли offset-md-0.5 работать? Можете ли вы предложить какой-либо лучший способ, кроме использования bootstrap offset? Это мой код:

<div class="container-fluid padding">
    <div class="row">
        <div class="container1 col-xs-12 col-sm-12 col-md-5">
            <app-projectstatus></app-projectstatus>
        </div>
        <div class="container2 col-xs-12 col-sm-12 col-md-6 offset-md-1">
            <app-upcomingreleases></app-upcomingreleases>
        </div>
    </div>
</div>

Answer 1

В bootstrap -4 нет классов *-xs-*. Вместо этого используйте col-12. `col-xs- *` не работает в Bootstrap 4

---

Есть три способа добавить пространство между столбцами.

1. margin-x в .col-*
2. padding-x в .col-*
3. justify-content-between в .row

Маржа довольно сложная, поскольку она влияет на сумму ширины всех столбцов. Ширина + поле-х двух столбцов не должно превышать ширину .row. В противном случае столбцы ломаются.

Общая ширина двух столбцов на MD-экране 91.667%. Таким образом, у вас есть 8.333% бесплатный сок. Вы можете контролировать, где использовать эти 8.333%.

offset-md-1, mr-auto, ml-auto и justify-content-between, чтобы получить одинаковый результат: 8.333% пробел между двумя столбцами.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid mt-5">
  <div class="row justify-content-between">
    <div class="container1 col-12 col-md-6  bg-primary">
        
    </div>
    <div class="container2 col-12 col-md-5 offset-md-1 bg-danger ">
        offset-md-1
    </div>
  </div>
</div>


<div class="container-fluid mt-5">
  <div class="row justify-content-between">
    <div class="container1 col-12 col-md-6 mr-auto bg-primary">
        mr-auto
    </div>
    <div class="container2 col-12 col-md-5 bg-danger ">
        
    </div>
  </div>
</div>

<div class="container-fluid mt-5">
  <div class="row justify-content-between">
    <div class="container1 col-12 col-md-6 bg-primary">
        
    </div>
    <div class="container2 col-12 col-md-5 bg-danger ">
        ml-auto
    </div>
  </div>
</div>



<div class="container-fluid mt-5">
  <div class="row justify-content-between">
    <div class="container1 col-12 col-md-6 bg-primary">
        justify-content-between
    </div>
    <div class="container2 col-12 col-md-5 bg-danger ">
    justify-content-between
    </div>
  </div>
</div>

Если вы хотите, чтобы между ними было 8.333% / 2 пробел. Вы не можете сделать это в bootstrap -4. Так что вам нужно использовать css.

@media (min-width: 768px) {
  .ml-md-0_5 {
    margin-left: calc((100% / 12) / 2)
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid padding">
  <div class="row">
    <div class="container1 col-12 col-md-6 bg-primary">
      
    </div>
    <div class="container2 col-12 col-md-5 bg-danger ml-md-0_5">
      ml-md-0_5
    </div>
  </div>
</div>

Теперь общая ширина + поля обоих столбцов 95.833%. По умолчанию элементы выровнены по левому краю. Следовательно, 4.166% свободный сок в правой части последнего столбца. Вы можете использовать его на x-стороне любого из столбцов, если вы sh так.

Как уже говорилось ранее, вы можете использовать padding-x также, что я предпочитаю, потому что это не влияет на общую ширину колонны.

Answer 2

Используйте ml-auto вместо offset-md-1, он идеально подходит для вас.

Попробуйте этот код:

<div class="container-fluid padding">
    <div class="row">
        <div class="container1 col-xs-12 col-sm-12 col-md-5">
            <app-projectstatus></app-projectstatus>
        </div>
        <div class="container2 col-xs-12 col-sm-12 col-md-6 ml-auto">
            <app-upcomingreleases></app-upcomingreleases>
        </div>
    </div>
</div>

Надеюсь, это будет отлично работать для вас.

Примечание: Не могу понять, насколько велик размер offset-md-1? свойство css по умолчанию для этого класса является фиксированным margin-left: 8.333333%; в bootstrap. Вы также можете использовать этот класс, но при условии, что вам не нужно вносить какие-либо изменения в ширину col-**-*.

Спасибо ...