Вложенные столбцы внутри вкладок Bootstrap4

Question

У меня есть этот макет:

По сути, я хочу добавить несколько вложенных столбцов внутри этих вкладок.

Что я пробовал:

Проблема в том, что столбцы внутри этих вкладок перекрываются, между ними нет отступов.

Что я делаю не так?

Вот jsfiddle

Спасибо!

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
 <div class="row">
    <div class="fruits col-md-8">
        <nav>
            <div class="nav nav-tabs" id="nav-tab" role="tablist">
                <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-content1" role="tab" aria-controls="nav-content1" aria-selected="true">Content 1</a>
                <a class="nav-item nav-link" id="nav-content2-tab" data-toggle="tab" href="#nav-content2" role="tab" aria-controls="nav-content2" aria-selected="false">Content 2</a>
            </div>
        </nav>

        <div class="tab-content" id="nav-tabContent">
            <div class="tab-pane fade show active" id="nav-content1" role="tabpanel" aria-labelledby="nav-content1-tab">
                <div class="row">
                    <div class="col-md-4">
                        <p>asdlaklsdlkasdlksadkldsakldsaklsda</p>
                    </div>

                    <div class="col-md-4">
                        <p>asdlaklsdlkasdlksadkldsakldsaklsda</p>
                    </div>

                    <div class="col-md-4">
                        <p>asdlaklsdlkasdlksadkldsakldsaklsda</p>
                    </div>

                </div>




                <div class="tab-pane fade" id="nav-content2" role="tabpanel" aria-labelledby="nav-content2-tab">...</div>
            </div>
        </div>




    </div>

    <div class="fruits-news col-md-4">
        <h2>Heading</h2>
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
        <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
    </div>
</div>

<hr>

Answer 1

Столбцы работают как положено. Однако содержимое столбцов (очень длинные слова) не нарушается, и поэтому переполняет столбцы. Использование:

p {
  overflow-wrap: break-word;
}

https://www.codeply.com/go/5Bi5s4n5DS

Примечание: 2-я панель вкладок также находится внутри 1-й панели вкладок в вашей разметке, поэтому 2-я вкладка не работает

Answer 2

В bootstrap4 вам не нужно устанавливать класс как col-md-(number), просто col-md

Просто замените это:

HTML:

<div class="row">
    <div class="col-md-4">
        <p>asdlaklsdlkasdlksadkldsakldsaklsda</p>
    </div>

    <div class="col-md-4">
        <p>asdlaklsdlkasdlksadkldsakldsaklsda</p>
    </div>

    <div class="col-md-4">
        <p>asdlaklsdlkasdlksadkldsakldsaklsda</p>
    </div>
</div>

По

HTML:

<div class="container">
    <div class="row">
        <div class="col-sm">
            One of three columns
        </div>
        <div class="col-sm">
            One of three columns
        </div>
        <div class="col-sm">
            One of three columns
        </div>
    </div>
</div>

Jsfiddle: Здесь

Answer 3

В Bootstrap нет полей для столбцов, поэтому лучше работать с отступами, которые у них есть.Вы можете поместить свою рамку на элемент, который находится внутри ваших столбцов, и вы увидите расстояние между ними, и оттуда вы можете добавить отступы к этому внутреннему элементу (теги p в данном случае).

Затем добавляется word-wrap: break-word, если вы хотите обернуть длинные строки текста.

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col-md-4 p {
  border: solid 1px #6c757d;
  padding: 10px;
  word-wrap: break-word;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<div class="container">
  <div class="row">
    <div class="fruits col-md-8">
      <nav>
        <div class="nav nav-tabs" id="nav-tab" role="tablist">
          <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-content1" role="tab" aria-controls="nav-content1" aria-selected="true">Content 1</a>
          <a class="nav-item nav-link" id="nav-content2-tab" data-toggle="tab" href="#nav-content2" role="tab" aria-controls="nav-content2" aria-selected="false">Content 2</a>
        </div>
      </nav>

      <div class="tab-content" id="nav-tabContent">
        <div class="tab-pane fade show active" id="nav-content1" role="tabpanel" aria-labelledby="nav-content1-tab">
          <div class="row">
            <div class="col-md-4">
              <p>asdlaklsdlkasdlksadkldsakldsaklsda</p>
            </div>

            <div class="col-md-4">
              <p>asdlaklsdlkasdlksadkldsakldsaklsda</p>
            </div>

            <div class="col-md-4">
              <p>asdlaklsdlkasdlksadkldsakldsaklsda</p>
            </div>
          </div>

          <div class="tab-pane fade" id="nav-content2" role="tabpanel" aria-labelledby="nav-content2-tab">...</div>
        </div>
      </div>
    </div>

    <div class="fruits-news col-md-4">
      <h2>Heading</h2>
      <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
      <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
    </div>
  </div>

  <hr>

</div>
<!-- /container -->