Question

我正在尝试制作在较宽屏幕上垂直并在较小屏幕上水平的标签，但不确定如何实现这一点。我尝试将flex-md-column和flex-lg-column添加到导航标签：

<ul class="nav nav-tabs flex-md-column flex-lg-column" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="info-tab" data-toggle="tab" href="#info" role="tab" aria-controls="info" aria-expanded="true"><i class="ion-compose"></i> Info</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="stats-tab" data-toggle="tab" href="#stats" role="tab" aria-controls="stats"><i class="ion-arrow-graph-up-right"></i> Statistics</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact"><i class="ion-email"></i> Contact</a>
  </li>
</ul>

但是，然后选项卡占据整个宽度，标签内容将被推送到下方。我该如何解决这个问题，以便选项卡只需要它们所需的宽度，然后内容可以转到导航标签一侧的顶部？我试过设置导航项的固定宽度，但是，这没有用。

Answer 1

您需要做的就是组合适当的flex类并在此处添加一些填充。 ;）

请务必仔细查看以下页面。 Bootstrap实际上有一个很棒的文档页面。

Flex和Spacing

以下是一个例子：

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css');

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>

<div class="container d-md-flex flex-md-row">
  <ul class="nav nav-tabs d-md-inline-flex align-self-md-start flex-md-column" id="myTab" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-expanded="true">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile">Profile</a>
    </li>
  </ul>
  <div class="tab-content py-3 px-md-3 py-md-0" id="myTabContent">
    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
      Lorem ipsum dolor sitamet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </div>
    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </div>
  </div>
</div>

Css Bootstrap 4 - 如何在较宽的屏幕上设置垂直标签，在较小的屏幕上设置水平标签

1 个答案: