Основные вкладки Развернуть, чтобы заполнить все доступное горизонтальное пространство в контейнере? - PullRequest
Новая
       11

Основные вкладки Развернуть, чтобы заполнить все доступное горизонтальное пространство в контейнере?

0 голосов
/ 13 марта 2019

Я работаю над переписыванием частей моего существующего приложения в Foundation Framework 6. Сейчас я работаю с вкладками Foundation и пытаюсь развернуть вкладки по горизонтали, чтобы заполнить все доступное горизонтальное пространство. Это делается для того, чтобы соответствовать внешнему виду предыдущей версии сайта.

Я работал над примером в jsfiddle, чтобы найти решение. К сожалению, это все еще выглядит так:

Текущее размещение вкладок

Вот ссылка на мой текущий прогресс в примере в jsfiddle: https://jsfiddle.net/9j6vpdm3/1/

Этот jsfiddle является примером реализации наиболее близкого ответа, который мне удалось найти в StackOverflow ( Обоснованные вкладки в проекте Foundation for Apps ). К сожалению, это решение не сработало, так как вы можете видеть, что вкладки по-прежнему выровнены по левому краю и имеют достаточно свободного пространства по горизонтали.

Существуют и другие решения, которые я нашел на форумах Zurb через Google, но ответы на них настолько стары, что предлагаемые ссылки больше не работают.

Есть ли хитрость в том, чтобы заставить вкладки основания динамически расширяться, чтобы заполнить все доступное горизонтальное пространство? 

$(document).foundation();
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.1.2/foundation.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.1.2/foundation.min.js"></script>


<style>
 div.tabs .tab-item {
    flex-grow: 1;
    text-align: center;
}
 </style>
 <div style="text-align: center">
   <ul class="tabs" id="example-tabs" data-tabs>
      <li class="tabs-title"><a href="#panel-0" aria-selected="true">Title 1</a></li>
      <li class="tabs-title"><a href="#panel-1" aria-selected="true">Title 2</a></li>
      <li class="tabs-title"><a href="#panel-2" aria-selected="true">Title 3</a></li>
      <li class="tabs-title"><a href="#panel-3" aria-selected="true">Title 4</a></li>
    </ul>
</div>

 <div class="tabs-content" data-tabs-content="example-tabs">
    <div class="tabs-panel" id="panel-0">
        <p>Content1 </p>
    </div>
    <div class="tabs-panel" id="panel-1">
        <p>Content 2 </p>
    </div>
    <div class="tabs-panel" id="panel-2">
        <p>Content 3 </p>
    </div>
    <div class="tabs-panel" id="panel-3">
        <p>Content 4 </p>
    </div>
  </div>

1 Ответ

0 голосов
/ 14 марта 2019

Для этого можно использовать flexbox практически для любого контейнера с прямыми дочерними объектами, которым вы пытаетесь управлять.

С помощью родительского элемента flex дочерний элемент может расширяться для равномерного заполнения пространства, задав свойство flex.flex: 1 0 0;

Пример: https://codepen.io/rafibomb/pen/NJyYQE

.tabs {
  display: flex;

  .tabs-title {
    flex: 1 0 0;
    text-align: center;

    & + .tabs-title {
      border-left: 1px solid #ddd;
    }
  }
}
...