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

Question

如何在Semantic 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

我通过使用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 2

目前还没有 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.