Question

当存在偶数项时，我遇到使用Bootstrap动态调整某些项目的问题。

我有4个HTML select项彼此相邻，我希望它们之间有一些间距。因此，我在col-md-3 div中设置了每个选择项。为此，我使用了每个宽度80％。在这些下面我有一个table，我希望它的大小为100％。我已将所有项目放在row容器中。我希望选择器与下面的表格保持一致，这是我无法做到的。

<div class="container">
<div class="row">
    <h1>Title</h1>
    <div class="col-md-3 col-xs-3" style="padding-left: 0; padding-right: 0;">
        <label>Test1</label>
        <select style="width: 80%">
            <option selected="selected" value="1">Test1</option>
        </select>
    </div>
    <div class="col-md-3 col-xs-3" style="padding-left: 0; padding-right: 0;">
        <label>Test2</label>
        <select style="width: 80%">
            <option selected="selected" value="1">Test2</option>
        </select>
    </div>
    <div class="col-md-3 col-xs-3" style="padding-left: 0; padding-right: 0;">
        <label>Test3</label>
        <select style="width: 80%">
            <option selected="selected" value="1">Test3</option>
        </select>
    </div>
    <div class="col-md-3 col-xs-3" style="padding-left: 0; padding-right: 0;">
        <label>Test4</label>
        <select style="width: 80%">
            <option selected="selected" value="1">Test4</option>
        </select>
    </div>

    <p>
       Some description
    </p>

    <table class="text-center">
        <thead>
            <tr>
                <th>1</th>
                <th>2</th>
                <th>3</th>
                <th>4</th>
                <th>5</th>
            </tr>
        </thead>
    </table>
</div>
</div>

问题是因为我在选择器上使用80％宽度的最后一个选择器，即＆＃34; Test5＆＃34;不与表的结束边界对齐。如果看一下以下JSFiddle，我认为问题很明显。

那么如何动态地将项目与Bootstrap对齐并在元素之间保持间距？我在下面附上了所需设计的图片，我希望它看起来如何。

Answer 1

这是你看的吗？ https://jsfiddle.net/fjavmgrf/1/

如果你拿走填充物，我个人觉得它看起来更好，但是你可以选择这个选项。

select{
  width:100%;
}

.paddingZero{
  padding:0;
}

或者：https://jsfiddle.net/37z2dqqk/1

编辑（提交图像后

使用bootstrap，你真正想要的是什么。是的你可以用填充物和可能的边缘进行游戏并破解它，但我个人不是它的粉丝。如果您仍然希望这样做，那么基本上只需调整填充直到它工作并保持选择为100％。对不起，我不能帮助我，但我诚实的建议是与我的答案中的一条建议或上述评论中的建议一致。

如何使用Bootstrap水平对齐偶数项目与项目之间的间距？

1 个答案: