Foundation Float Grid 被输入组破坏

Question

使用 Zurb Foundation 6.3.1，我使用 Float Grid 显示元素。不幸的是，由于 class.

中使用了 display: table，所以使用 class input-group 看起来也会破坏样式

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

如您所见，绿色输入不会在左侧。 endclass 使其仅位于蓝色输入的左侧，就像红色输入保留 space.

一样

这是来自基金会 input-group class 的 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。但是因为这是在 table 内渲染的，所以它显然会导致额外的像素。这就是为什么绿色条不会向左浮动的原因。

要解决这个问题，我只需用 margin-bottom: 0; 覆盖 input-group 就可以了。

Foundation Float Grid 被输入组破坏

Foundation Float Grid broken by input-group

css

css-float

zurb-foundation