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

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

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

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

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

Что я делаю неправильно?

Спасибо!

<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>

Столбцы не пересекаются. Эти слова длиннее столбцов. Вам нужно сломать их.

— 06.06.2019 18:36

html css twitter-bootstrap bootstrap-4

06.06.2019 18:24

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

553

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

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

p {
  overflow-wrap: break-word;
}

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

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

06.06.2019 18:36

В 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 -->

06.06.2019 18:37

В 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: Здесь

06.06.2019 18:37