修复 Semantic 中一行中一列的宽度 ui

Question

如何在语义 UI 中连续两列，其中一列具有固定宽度并且不随浏览器大小的调整而改变？

我试过了，但出了点问题：

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

Answer 1

（还）没有 SUI 特定的方式，因此您必须编写自定义 CSS

您在代码中使用了过多的 SUI class。

这不是必需的：<div class="ui grid container"> 当您在其中定义另一个网格时。

<div class="ui two column divided grid">中的two columnclass也是多余的

所以解决你的问题，你可以改变第一列classes然后用CSS固定它的宽度。见 JS Fiddle: 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;
}

不要在要保持固定的列中使用 class 等 two wide，因为它们具有一些关联的宽度属性，这些属性可能会覆盖 .left.column[ 的行为=19=]

对于响应能力，您必须在断点附近稍微管理 padding/margins 或使用媒体查询更新 twelve wide column 的 class。

Answer 2

我通过使用 ui 网格使用的 flexbox 解决了这个问题。

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

Answer 3

遗憾的是，Semantic UI 框架不提供固定宽度的列支持。在某些情况下，它可以通过以下方式解决：

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

修复 Semantic 中一行中一列的宽度 ui

Fix width of one column in a row in Semantic ui

semantic-ui