垂直间距文本框与Bootstrap形式水平

Question

我使用Bootstrap 3创建了form-horizontal，如下所示：

当我缩小视口时，我喜欢＆＃34;开始＆＃34;和＆＃34;结束＆＃34;文本框之间有空格。然而，他们在一起：

如何添加与表单其余部分一致的垂直空白？

这是一个带有我的HTML的Bootply工作区：http://www.bootply.com/sfB9elzbrC

<form class="form-horizontal" method="post" action="">
    <div class="form-group">
        <div class="col-sm-4">
            <label for="user_search">Who is this reservation for?</label>
            <input id="user_search" name="selected_user_id" class="form-control">
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-4">
            <label for="tool_search">Which tool will be used?</label>
            <input id="tool_search" name="selected_tool_id" class="form-control">
        </div>
    </div>
    <label class="control-label" for="start">When will the reservation start and end?</label>
    <div class="form-group">
        <div class="col-sm-4">
            <input id="start" name="start" class="form-control" type="text" placeholder="Start" autocomplete="off">
        </div>
        <div class="col-sm-4">
            <input id="end" name="end" class="form-control" type="text" placeholder="End" autocomplete="off">
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-8">
            <label for="additional_information">Would you like to include any additional information for the reservation? (For example, tool configuration settings).</label>
            <textarea name="additional_information" class="form-control" id="additional_information" rows="4"></textarea>
        </div>
    </div>
    <input type='submit' id="create_reservation" class="btn btn-default" value="Create reservation">
</form>

Answer 1

为这些DIV添加一个类：

    <div class="col-sm-4 resv">
        <input id="start" name="start" class="form-control" type="text" placeholder="Start" autocomplete="off">
    </div>

并使用@media查询添加间距：

@media only screen and (max-device-width: 480px) {
    .resv {margin-top:10px;}
}

修改了bootply：http://www.bootply.com/31cYqbtHEZ