Question

这些天我正在学习语义UI网格。使用起来非常酷，但我遇到了一些网格问题。下面我创建了两个不同的网格，但我不明白为什么两个网格之间没有间距，我无法弄清楚如何在它们之间添加间距（没有我添加一些新的css）。是否有一个类要添加到网格中以获得我想要的间距？

＆＃13;

no transactions/positions to chart

＆＃13;

Answer 1

我认为使用“填充”字样时会出现问题。网格。我无法找到任何SUI选项，但也许嵌套网格是一种临时解决方案。

http://semantic-ui.com/collections/grid.html#/overview

彩色网格可以使用命名颜色变体来添加背景颜色，但只能使用不包含负边距的填充网格。

＆＃13;

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script>
<div class="ui container">
    <div class="ui equal width padded grid">
        <div class="ui row">
            <div class="ui black column"></div>
            <div class="ui red column"></div>
        </div>
    </div>
    
    <div class="ui grid">
        <div class="ui row">
            <div class="ui column">
                 <div class="ui padded grid">
                      <div class="ui blue row">
                           <div class="ui column">Single Row</div>
                      </div>
                 </div>
            </div>
        </div>
        <div class="ui equal width row">
            <div class="ui column">
                 <div class="ui padded grid">
                      <div class="ui green row">
                           <div class="ui column">1</div>
                      </div>
                 </div>
            </div>
            <div class="ui column">
                 <div class="ui padded grid">
                      <div class="ui yellow row">
                           <div class="ui column">2</div>
                      </div>
                 </div>
            </div>
            <div class="ui column">
                 <div class="ui padded grid">
                      <div class="ui red row">
                           <div class="ui column">3</div>
                      </div>
                 </div>
            </div>
        </div>
        <div class="ui three column row">
            <div class="ui left floated column">
                 <div class="ui padded grid">
                      <div class="ui pink row">
                           <div class="ui column">LEFT</div>
                      </div>
                 </div>
            </div>
            <div class="ui right floated column">
                 <div class="ui padded grid">
                      <div class="ui pink row">
                           <div class="ui column">LEFT</div>
                      </div>
                 </div>
            </div>
        </div>
    </div>
</div>

＆＃13;

网格语义UI之间的空间

1 个答案: