Question

我需要你帮助bootstrap form-group`s。

这是我的HTML

<form action="#" class="form-inline" role="form">
    <div class="form-group no-margin">
        <input type="text" class="form-control no-margin" placeholder="Search..." />
        <select class="form-control selectcity no-margin" id="sel1">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
        </select>
        <div class="input-group date no-margin" id="datetimepicker1">
            <input type="text" class="form-control col-md-3" placeholder="თარიღი" style="padding: 0 5px;" />
            <span class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>
            </span>
        </div>
    </div>
    <button class="btn btn-blue" type="submit">Search</button>
</form>

看起来它们是内联的但他们彼此之间存在差距。我在css中尝试了margin：0，但它不起作用请帮帮我。

此图片显示了它现在的样子

Image 1

在这张图片上是我需要的方式

Image 2

请帮帮我。

Answer 1

这是内联/内联块元素的默认行为：它们尊重它们之间的空格，包括换行符，制表符等。在您的情况下，最简单的解决方法是将font-size: 0设置为.form-group容器，这样，空格有效地呈现为零宽度：

.form-group.no-margin {
    font-size: 0;
}

这种技巧不会影响内部输入元素，因为它们具有更具体的font-size设置，但它们之间的差距将消失。

输入中的bootstrap form-groups

1 个答案: