Основание одной ширины столбца сетки для всего окна просмотра? - PullRequest
Новая
       6

Основание одной ширины столбца сетки для всего окна просмотра?

0 голосов
/ 07 ноября 2018

В Semantic UI я мог бы использовать .four.wide.column, чтобы создать столбец шириной 4/16 на всех устройствах / окнах просмотра.

Но в Foundation, кажется, мне нужно использовать .small-4.medium-4.large-4, чтобы убедиться, что столбец имеет одинаковую ширину на разных устройствах / окнах просмотра.

Есть ли что-то вроде ... .all-4 ширины столбца в Foundation, поэтому мне не нужно использовать .small-4.medium-4.large-4? 

<!-- Semantic UI -->
<div class="ui grid">
    <div class="four wide column"></div>
</div>

<!-- Foundation -->
<div class="grid-x">
    <!-- Is there a .all-4 class? -->
    <div class="small-4 medium-4 large-4 cell"></div>
</div>

Ответы [ 2 ]

0 голосов
/ 07 ноября 2018

Взгляните на Foundation XY Grid Docs 

.cell {
  background: #1779ba;
  color: #fefefe;
  text-align: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.0/css/foundation.min.css" rel="stylesheet" />
<div class="grid-x grid-margin-x">
  <div class="cell small-6">6 cells</div>
  <div class="cell small-6">6 cells</div>
</div>
<div class="grid-x grid-margin-x ">
  <div class="cell small-4">4 cells</div>
  <div class="cell small-4">4 cells</div>
  <div class="cell small-4">4 cells</div>
</div>

Или, если вам нужно, более старые Foundation float grid документы . (По умолчанию они отключены и были заменены в v6.4) 

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.0/css/foundation-float.css" rel="stylesheet" />
<div class="row">
  <div class="columns small-4">4</div>
  <div class="columns small-4">4</div>
  <div class="columns small-4">4</div>
</div>
<div class="row">
  <div class="columns small-6">3</div>
  <div class="columns small-6">9</div>
</div>
0 голосов
/ 07 ноября 2018

Если вы используете <div class="small-4 cell"></div>, он будет иметь правильный размер во всех окнах просмотра.

Классы всегда перезаписываются на следующий, более высокий, например, средний перезаписывает маленький

...