Question

是的，尽管使用.nav .nav-tabs，为什么我仍不能使我的flex-sm-column垂直堆叠。我现在真的开始对此失去耐心。为什么？

<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="../path/to/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>    
<script src="../Script/toggle.js" type="text/javascript"></script>  
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<ul class="nav nav-tabs flex-sm-column" role="tablist">
    <li class="nav-item active">
        <a href="#home" class="nav-link show mobile-full-screen-width" role="tab" data-toggle="tab">Overview</a>
    </li>
    <li class="nav-item">
        <a href="#2" class="nav-link mobile-full-screen-width" role="tab" data-toggle="tab">Why Us</a>
    </li>
    <li class="nav-item">
        <a href="#3" class="nav-link mobile-full-screen-width" role="tab" data-toggle="tab">How we can help</a>
    </li>
    <li class="nav-item">
        <a href="#4" role="tab" class="nav-link mobile-full-screen-width" data-toggle="tab">Express your interest</a>
    </li>
</ul>
</body>
</html>

Answer 1

我有电子笔或回购品吗？我想看看目前正在发生什么。

从看着它。似乎您的无序列表上没有d-flex类。尽管您拥有flex util类，但您仍然需要d-flex一个类。从下面您可以看到：

<div class="d-flex flex-column bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>

将类d-flex放在您的无序列表上将使列表具有display: flex，然后您就可以根据需要使用其他flex类。

https://getbootstrap.com/docs/4.3/utilities/flex/#direction

在小屏幕上查看时，为什么不能使导航选项卡垂直对齐？

1 个答案: