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

这不是必需的:在其中定义另一个网格时的<div class="ui grid container">。
two column中的<div class="ui two column divided grid">类也是多余的。

因此，要解决您的问题，您可以更改第一个列类，然后使用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;
}

不要在想要保留的列中使用诸如 two wide之类的类，因为它们具有一些关联的宽度属性，这些属性可能会覆盖 .left.column的行为

为了获得响应能力，您将不得不在断点附近管理填充/边距，或者使用媒体查询来更新 twelve wide column的类。