Как настроить ширину контейнера в Semantic UI

Question

Например, размер таблетки контейнера определяется:

/* In container.variables */ 
@tabletWidth : @tabletBreakpoint - (@tabletMinimumGutter * 2) - @scrollbarWidth; 

, который упоминается в Semantic Container document.

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

Answer 1

Линия, о которой идет речь (во время написания) внутри container.variables. Однако я настоятельно призываю вас изменить (увеличить) @tabletMinimumGutter вместо прямого изменения ширины.

Это означает, что вам потребуется перестроить семантический интерфейс, который, я считаю, не стоит того, если единственное, что вы хотите изменить, это ширина на планшете. Я бы вместо того, чтобы просто добавить некоторые дополнительные CSS на странице, как это, который будет перекрывать ширину, установленную семантического UI (в этом примере, ширина контейнера я хочу 723px, но вы можете использовать что-нибудь):

<link rel="stylesheet" type="text/css" href="semantic.css"> 
<style> 
/* You probably want this in a separate CSS file */ 

@media only screen and (min-width: 768px) and (max-width: 991px) { 
    .ui.container { 
    width: 723px; 
    } 

    .ui.grid.container { 
    width: calc(723px + 2rem) !important; 
    } 

    .ui.relaxed.grid.container { 
    width: calc(723px + 3rem) !important; 
    } 

    .ui.very.relaxed.grid.container { 
    width: calc(723px + 5rem) !important; 
    } 
} 
</style>