Bootstrap добавление элементов в навигационную панель вместо их переключения - PullRequest
Новая
       14

Bootstrap добавление элементов в навигационную панель вместо их переключения

0 голосов
/ 02 августа 2020

Я пытаюсь создать панель навигации в bootstrap 3, но не знаю, почему вместо переключения между элементами панели навигации добавляются данные содержимого. например, щелкнув ВСЕ, тогда Ожидание дает вывод как = ab c xyz 

<div class="vendor category-tab shop-details-tab"><!--category-tab-->
            <div class="col-sm-12">
                <ul class="nav nav-tabs">
                    <li><a href="#allOrder" data-toggle="tab">ALL (10)</a></li>
                    <li class="active"><a href="#pending" data-toggle="tab">Pending (5)</a></li>
                    <li ><a href="#delivered" data-toggle="tab">Delivered (5)</a></li>
                    <li ><a href="#Cancelled" data-toggle="tab">Cancelled (5)</a></li>
                </ul>
            </div>
            <div class="tab-content">
                <div class="tab-pane" id="allOrder" >
                    abc
                </div>

            </div>
            <div class="tab-content">
                <div class="tab-pane fade active in" id="pending" >
                    xyz
                </div>

            </div>
        </div><!--/category-tab-->

изображение вывода

1 Ответ

0 голосов
/ 02 августа 2020

Укажите свойство "Padding or Margin" для элемента списка 

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
  float: left;
}

li a {
  display:inline-block;
  padding: 18px;
  background-color:grey;
}
</style>
</head>
<body>
<div style="width:100%;background:grey">
<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">News</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About</a></li>
</ul>
</div>
</body>
</html>

Вы можете просто изменить отступ на поле, чтобы получить тот же результат

...