Question

我有模态窗口，我想要4个内联输入。但是它们在侧面有15px填充，而在2个输入之间总共有30px填充。

如何在输入之间制作15px空间？

编辑：我希望在侧面和输入之间使用相同的间距。

我试试jsfiddle：

代码：

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">

                <div class="row">
                    <div class="col-xs-3">
                        <input type="text" class="form-control" placeholder=".col-xs-3">
                    </div>
                    <div class="col-xs-3">
                        <input type="text" class="form-control" placeholder=".col-xs-3">
                    </div>
                    <div class="col-xs-3">
                        <input type="text" class="form-control" placeholder=".col-xs-3">
                    </div>
                    <div class="col-xs-3">
                        <input type="text" class="form-control" placeholder=".col-xs-3">
                    </div>
                </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

Answer 1

这是另一种选择。你可以添加一个类和一点css：

.spacing > div + div{padding-left: 0;}

http://jsfiddle.net/5u2paavk/

Answer 2

当然，使用特殊类来调整row和col-上的填充和负边距，如下所示：

.row.no-margin {
    margin-left: -7.5px;
    margin-right: -7.5px;
}

.row.no-margin > .col-xs-3{
    padding-left: 7.5px;
    padding-right: 7.5px;
}

Demo on Codeply

Bootstrap 3 - 4个带有相同空格的模态内联输入

2 个答案: