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

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

2 个答案: