Question

我有这样的布局：

基本上，我想在这些标签内添加一些嵌套列。

我尝试过的：

问题是特定选项卡内的列重叠，因此之间没有填充。

我在做什么错？

谢谢！

<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

注意：第二个选项卡窗格也位于标记中的第一个选项卡窗格内，因此第二个选项卡不起作用

Answer 2

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

Answer 3

在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：Here

标签内的嵌套列Bootstrap4

3 个答案: