Css Bootstrap 4 - 如何在更宽的屏幕上设置垂直选项卡，在更小的屏幕上设置水平选项卡答案

【问题标题】：Css Bootstrap 4 - how to have vertical tabs on wider screens and horizontal on smallerCss Bootstrap 4 - 如何在更宽的屏幕上设置垂直选项卡，在更小的屏幕上设置水平选项卡
【发布时间】：2017-09-13 19:54:27
【问题描述】：

我正在尝试制作在较宽屏幕上垂直并在较小屏幕上水平的选项卡，但不知道如何实现。我尝试将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>

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

【问题讨论】：

真的反之亦然！在大屏幕中它是水平的，在较小的屏幕中它要么折叠要么变成垂直。这只是响应能力的问题！
是的，但如果可能的话，我想这样做
好伙计，永远遵守标准！！如果你描述的方式好，它就会成为标准的UI设计！更不用说从用户体验设计的角度来看，它也不好。但无论如何。你能用样机图片详细说明吗？

标签： css bootstrap-4

【解决方案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>

【讨论】：