Bezdepbonusu7Программирование: статьи и ответы
Меню

Вопрос

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

Автор вопроса: user2840647Ответов: 1

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

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

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

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

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

htmlcsssemantic-ui

Ответы

Ответ 1 · рейтинг 1 · Sandeep C. Nath

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

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

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

Перевод вопроса и ответов сообщества Stack Overflow, лицензия CC BY-SA. Оригинал на Stack Overflow.

Похожие материалы