Приложить вертикальное меню для сегментации с помощью Semantic UI

Как можно привязать вертикальное меню к сегменту с использованием рамки CSS Semantic-UI? При использовании разметки, представленной в документации, будет существовать маржа (в результате образуется сетка) между содержимым и меню. Если не использовать сетку, границы не подходят.Приложить вертикальное меню для сегментации с помощью Semantic UI

<div class="ui grid"> 
    <div class="row"> 
     <div class="sixteen wide column"> 
      <!-- Overlapping border --> 
      <div class="ui horizontal segments"> 
       <div class="ui vertical tabular menu"> 
        <a class="active item">Bio</a> 
        <a class="item">Pics</a> 
        <a class="item">Companies</a> 
        <a class="item">Links</a> 
       </div> 
       <div class="ui segment"> 
        This is an stretched grid column. This segment will always match the tab height 
       </div> 
      </div> 
     </div> 
    </div> 
    <div class="row"> 
     <!-- Margin between the elements --> 
     <div class="four wide column"> 
      <div class="ui vertical fluid tabular menu"> 
       <a class="active item">Bio</a> 
       <a class="item">Pics</a> 
       <a class="item">Companies</a> 
       <a class="item">Links</a> 
      </div> 
     </div> 
     <div class="twelve wide stretched column"> 
      <div class="ui segment"> 
       This is an stretched grid column. This segment will always match the tab height 
      </div> 
     </div> 
    </div> 
    <div class="row"> 
     <!-- Margin between the elements --> 
     <div class="four wide column"> 
      <div class="ui vertical fluid menu"> 
       <a class="active item">Bio</a> 
       <a class="item">Pics</a> 
       <a class="item">Companies</a> 
       <a class="item">Links</a> 
      </div> 
     </div> 
     <div class="twelve wide stretched column"> 
      <div class="ui segment"> 
       This is an stretched grid column. This segment will always match the tab height 
      </div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="sixteen wide column"> 
      <!-- Overlapping border --> 
      <div class="ui horizontal segments"> 
       <div class="ui vertical menu"> 
        <a class="active item">Bio</a> 
        <a class="item">Pics</a> 
        <a class="item">Companies</a> 
        <a class="item">Links</a> 
       </div> 
       <div class="ui segment"> 
        This is an stretched grid column. This segment will always match the tab height 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

JSFiddle

я ожидать, что вертикальное меню присоединен к сегменту (например, при использовании горизонтального меню).

источник

2016-11-10 user3333137

Так что я смущен тем, что вы на самом деле хотите. Можете ли вы поделиться скриншотом, показывающим, что вы на самом деле ищете? Я думаю, что добавление пользовательского переопределения css может помочь вам решить вашу проблему при использовании сетки ui. –

Спасибо за ваше замечание. Добавлены скриншоты к вопросу. – user3333137

Я думаю, что вы можете сделать небольшой класс наиважнейшей CSS, чтобы изменить несколько вещей по умолчанию grid ui и menu классов, чтобы сделать то, что вы хотите. Вот пример кода с помощью только первого примера сетки: http://codepen.io/Nasir_T/pen/dOGGro

источник

2016-11-10 15:36:37

Большое спасибо, но не совсем то, что я ищу. Я ищу специфическое решение для семантического интерфейса, чтобы обрабатывать все вертикальные меню, предоставляемые через фреймворк CSS. Для горизонтальных меню есть, например, «прикрепленный» класс, который прикрепляет меню к элементу сегмента. – user3333137

Приложить вертикальное меню для сегментации с помощью Semantic UI

ответ

Смежные вопросы