Макет страницы на основе сетки Semantic-UI: невозможно удалить промежутки

Я создаю веб-приложение, используя semantic-ui. Я пытаюсь создать макет с боковой панелью и основной областью содержимого. Сначала я думал, что лучше всего использовать сетку, за исключением того, что она вызывает несколько проблем:

  1. Столбцы и строки будут иметь дополнительные интервалы/желоба между ними.
  2. Единственный способ «удалить» желоба — установить цвет столбца с чем-то вроде <div class="four wide black column">, но это приводит к тому, что столбцы перекрываются с другим содержимым.

Таким образом, кажется, что сетки — не лучший инструмент для создания макетов страниц, хотя они предоставляют функциональные возможности, которые делают их полезными для макетов страниц (например, определение размеров разделов; four wide column, ten wide column и т. д.).

Каков рекомендуемый способ компоновки веб-приложений с использованием Semantic-UI, например простая боковая панель и столбцы основного контента?


html css semantic-ui
person user2840647    schedule 15.12.2015    source источник
comment
по-видимому, это не похоже на то, что вы можете полностью удалить желоба, но вы можете просто переопределить семантический css и применить свои правила, также при построении семантики вы можете изменить множество параметров, среди них поля и отступы, я не проверял, но я почти уверен, что желоба тоже будет там. Просто установите их на 0px. Это лучший способ настройки, и он легко сохраняется при обновлении до новой версии.   -  person mikus    schedule 15.12.2015
comment
для бокового меню используйте боковую панель :)   -  person mikus    schedule 15.12.2015
comment
Это полностью зависит от того, работаете ли вы с исходным кодом или скомпилированной версией? Если вы используете исходный код, создайте другой класс сетки, который не учитывает поля, такие как ui grid tight или что-то в этом роде. Тогда у вас все еще есть оба варианта.   -  person Luke    schedule 23.06.2016

Ответы (1)


arrow_upward
1
arrow_downward

Почему бы вам не переопределить поля и отступы по умолчанию, применяемые для «сетки» и «столбца», как это,

.your-custom-class.grid {
    margin: 0;
}
.your-custom-class.grid .column {
    padding: 0;
}

Таким образом, вы получите сетку без пробелов между столбцами.

person Sandeep C. Nath    schedule 22.02.2018