Bootstrap 4 меняет интервал между столбцами-обертками внизу, а не из стороны в сторону

Question

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

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="container-fluid">
<div class="row">
<div class="col-6 bg-dark text-light text-center mr-1"> Hello </div>
<div class="col-6  bg-danger text-light text-center"> Hello </div>
</div>
</div>

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

Answer 1

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<div class="container-fluid">
<!-- Control the column width, and how they should appear on different devices -->
<div class="row">
  <div class="col-sm-6" style="background-color:yellow;">50%</div>
  <div class="col-sm-6" style="background-color:orange;">50%</div>
</div>
</div>

Answer 2

Желоб (интервал между столбцами) создается с отступом, а не с полями. Когда вы корректируете поля, это сбрасывает сетку. Вы можете использовать внутренний DIV's ...

<div class="container-fluid px-0">
    <div class="row no-gutters">
        <div class="col-6 text-light text-center">
            <div class="bg-dark mr-1">Hello</div>
        </div>
        <div class="col-6 text-light text-center">
            <div class="bg-danger">Hello</div>
        </div>
    </div>
</div>

или заставьте row no обернуть с flex-nowrap ...

<div class="container-fluid">
    <div class="row flex-nowrap">
        <div class="col-6 bg-dark text-light text-center mr-1"> Hello </div>
        <div class="col-6 bg-danger text-light text-center"> Hello </div>
    </div>
</div>

https://www.codeply.com/go/p4NpmmRxmb