web-dev-qa-db-ja.com

セマンティックUIの行の1列の幅を修正

セマンティックUIの行に2つの列を配置し、一方の列の幅が固定されていて、ブラウザーのサイズ変更によって変化しないようにするにはどうすればよいですか？

これを試しましたが、問題が発生しました。

<div class="ui grid container">
  <div class="ui two column divided grid">
    <div class="row">
      <div class="ui four wide  column" style="width= 250px;">
      </div>
      <div class="ui twelve wide  column">
        <div class="ui link cards">
          <div class="card">
            <div class="image">
              <img src="./lib/img/elliot.jpg">
            </div>
            <div class="content">
              <div class="header">Matt Giampietro</div>
              <div class="meta">
                <a>Friends</a>
              </div>
              <div class="description">
                Matthew is an interior designer living in New York.
              </div>
            </div>
            <div class="extra content">
              <span class="right floated">
              Joined in 2013
              </span>
              <span>
              <i class="user icon"></i>
              75 Friends
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
semantic-ui
7
user2229905

（まだ）SUI固有の方法はないので、カスタムCSSを作成する必要があります

コードで使用しているSUIクラスが多すぎます。

これは必須ではありません：<div class="ui grid container">その中に別のグリッドを定義する場合。

two columnの<div class="ui two column divided grid">クラスも冗長です。

したがって、問題を解決するには、最初の列クラスを変更してから、CSSを使用してその幅を修正できます。 JSフィドルを参照してください： https://jsfiddle.net/batrasoe/5289q8fr/1/

<div class="left column">
  Some Text
</div>
<div class="twelve wide  column">
<div class="ui link cards">

そして対応するCSSプロパティ：

#grid .left.column {
  width: 200px;
}

two wideの動作をオーバーライドする可能性のある関連する幅プロパティがあるため、固定したい列で.left.columnなどのクラスを使用しないでください。

応答性については、ブレークポイントの近くでパディング/マージンを少し管理するか、メディアクエリを使用してtwelve wide columnのクラスを更新する必要があります。

3
Sarthak

Uiグリッドが使用するflexbox）を使用してこれを解決しました。

<div class="ui two grid">
  <div class="column" style="flex: 1;"></div>
  <div class="column" style="flex: 0 0 300px;"></div>
</div>
11
Victor96

残念ながら、SemanticUIフレームワークは固定幅の列のサポートを提供していません。特定の方法で、次の方法で解決できます。

<style>
    .fixed-one-column {
         visibility: hidden;
     }
</style>
<div class="ui on wide column fixed-one-column">
    content#1
</div>
<div class="ui five wide column fixed-one-column">
    content#2
</div>
<div class="ui five wide column fixed-one-column">
    content#3
</div>
<script>
var max = -1;
$('.fixed-one-column').each(function() {
 if(parseFloat($(this).css('width').replace('px','')) > max) {   
    max =  parseFloat($(this).css('width').replace('px',''));
 }       
});
$('.fixed-one-column').css({'width':max+'px', 'visibility: initial'});
<script>
0
Sergey