Question

使用Zurb Foundation 6.3.1，我使用Float Grid显示元素。不幸的是，由于此类中使用了input-group，因此使用类display: table看起来会破坏样式。

这是渲染的内容（3个第一个RGB输入采用input-group样式，另一个没有它）：

正如您所看到的，绿色输入不会出现在左侧。 end类仅使其位于蓝色输入的左侧，就像红色输入保留空间一样。

这是来自Foundation input-group类的CSS：

.input-group {
    display: if($global-flexbox, flex, table);
    width: 100%;
    margin-bottom: $form-spacing;

    @if $global-flexbox {
      align-items: stretch;
    }

    > :first-child {
      border-radius: if($global-text-direction == rtl, 0 $input-radius $input-radius 0, $input-radius 0 0 $input-radius);
    }

    > :last-child {
      > * {
        border-radius: if($global-text-direction == rtl, $input-radius 0 0 $input-radius, 0 $input-radius $input-radius 0);
      }
    }
}

我的HTML代码：

{% extends 'layout.html.twig' %}

{% block content %}
    <div class="row">
        <h3 class="title">Foundation Design</h3>

        <!-- With the input-group class -->
        <div class="columns">
            <div class="large-6 column">
                <div class="input-group">
                    <span class="input-group-label"></span>
                    <input class="input-group-field typo-small" type="text" style="background-color: red;"/>
                </div>
            </div>
            <div class="large-6 column">
                <input type="text" style="background-color: blue;"/>
            </div>
            <div class="large-3 column end">
                <input type="text" style="background-color: green;"/>
            </div>
        </div>

        <!-- Without the input-group class -->
        <div class="columns">
            <div class="large-6 column">
                <div class=""> <!-- Fine without the .input-class styling -->
                    <span class="input-group-label"></span>
                    <input class="input-group-field typo-small" type="text" style="background-color: red;"/>
                </div>
            </div>
            <div class="large-6 column">
                <input type="text" style="background-color: blue;"/>
            </div>
            <div class="large-3 column end">
                <input type="text" style="background-color: green;"/>
            </div>
        </div>
    </div>
{% endblock %}

有没有人遇到过这个问题？

感谢。

Answer 1

input-group的下边距为1 rem。但是因为这是在表格中呈现的，所以它显然会产生额外的像素。这就是为什么绿色条不浮动到左边。

要解决此问题，我只需使用input-group覆盖margin-bottom: 0;，一切顺利。

Foundation Float Grid由输入组打破

1 个答案: