Почему я не могу заставить Nav-tabs выравниваться по вертикали при просмотре на маленьких экранах? - PullRequest
Новая
       0

Почему я не могу заставить Nav-tabs выравниваться по вертикали при просмотре на маленьких экранах?

0 голосов
/ 25 октября 2019

Правильно, почему я не могу заставить мой .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>

1 Ответ

1 голос
/ 25 октября 2019

У вас есть кодовое перо или репозиторий, на который я могу посмотреть? Я хотел бы видеть, что в настоящее время происходит.

Смотря на это. Кажется, у вас нет класса 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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...