例えば

Question

セマンティックUIコンテナ幅をカスタマイズする方法、錠剤容器のサイズをすることによって決定される：Semantic Container documentに記載されている

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

。

私はタブレットコンテナのサイズがそうであることを望んでいません。私はそれを小さくしたいので、コンテナのサイズをカスタマイズするには、どのファイルを変更して修正するべきですか？

Answer 1

問題の行は（書面の時）container.variablesです。ただし、幅を直接変更するのではなく、@tabletMinimumGutterを変更（増加）してください。

これは、セマンティックUIを再構築する必要があると言いますが、変更したい唯一のものがタブレットの幅であれば価値がないと思われます。私はだけでなく（この例では、私が欲しいコンテナの幅が723pxですが、あなたは何を使用することができます）セマンティックUIで設定された幅を上書きしますこれは、このように、自分のページにいくつかの追加のCSSを追加します。

<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>