2

Прошу помощи в реализации горизонтальной прокрутки табов bootstrap при адаптивном уменьшении экрана, если они не помещаются в строку. Код приведен ниже

<div>
<ul class="nav nav-tabs">
  <li class="active"><a href="#tab-description" data-toggle="tab">Описание</a></li>    
  <li><a href="#tab-specification" data-toggle="tab">Характеристики</a></li>
    <li><a href="#tab-docs" data-toggle="tab">Документы</a></li>
  <li><a href="#tab-video" data-toggle="tab">Видео</a></li>
  <li><a href="#tab-review" data-toggle="tab">Отзывов (0)</a></li>
    <li><a href="#tab-related" data-toggle="tab">Сопутствующие товары</a></li>
</ul>
</div>

Может есть готовое решение? Пробовал применять overflow: awto; не получается.

Bogdan Novik
  • 55

1 Answers1

1

Как вариант, использовать еще и плагин кастомного скролла:

$(".mcs-horizontal").mCustomScrollbar({
  axis:"x",
  theme:"dark-3",
  advanced:{ autoExpandHorizontalScroll:true }
});
.mcs-horizontal {
  overflow-x: auto !important;
  white-space: nowrap !important;
}

.mcs-horizontal li {
  position: relative;
  display: block;
  float: left;
  margin-bottom: -1px;
}


.mcs-horizontal li>a {
  display: block;
  position: relative;
  padding: 10px 15px;
  margin-right: 2px;
  line-height: 1.42857143;
  border: 1px solid transparent;
  border-radius: 4px 4px 0 0;
}


.mcs-horizontal li.active>a {
  color: #555;
  cursor: default;
  background-color: #fff;
  border: 1px solid #ddd;
  border-bottom-color: transparent;
}
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.js"></script>  


  <div class="container">
    <ul class="nav nav-tabs mcs-horizontal">
      <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
      <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
      <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
      <li><a data-toggle="tab" href="#menu3">Menu 3</a></li>
      <li><a data-toggle="tab" href="#menu4">Menu 4</a></li>
    </ul>

    <div class="tab-content">
      <div id="home" class="tab-pane fade in active">
        <h3>HOME</h3>
        <p>Some content.</p>
      </div>
      <div id="menu1" class="tab-pane fade">
        <h3>Menu 1</h3>
        <p>Some content in menu 1.</p>
      </div>
      <div id="menu2" class="tab-pane fade">
        <h3>Menu 2</h3>
        <p>Some content in menu 2.</p>
      </div>
      <div id="menu3" class="tab-pane fade">
        <h3>Menu 3</h3>
        <p>Some content in menu 3.</p>
      </div>
      <div id="menu4" class="tab-pane fade">
        <h3>Menu 4</h3>
        <p>Some content in menu 4.</p>
      </div>
    </div>
  </div>

P.S: проверить на меньшем разрешении.

SVE
  • 22,387