Bootstrap 3垂直形式,带有一行内联输入

Question

我应该如何重构以下标记,以便第二行的输入与它们之间的时间标签内联？我以为我可以在div上使用'form-inline'但它似乎没有应用正确的样式.

http://bootply.com/80058

<div class="well">
    <form role="form">
        <div class="row">
            <fieldset>
                <div class="form-group">
                    <div class="col-md-12">
                        <label for="address">To take me to</label>
                        <input type="text" name="address" id="address" class="form-control" placeholder="Enter a location" required>
                    </div>
                </div>
            </fieldset>
        </div>
        <div class="row">
            <fieldset>
                <div class="form-group">
                    <div class="col-md-12">
                        <label for="date">Date &amp; Time</label>
                        <input type="text" name="date" id="date" placeholder="Enter a date" class="form-control" required>
                        <label for="time">@</label>
                        <input type="text" name="time" id="time" placeholder="Enter a time" class="form-control" required>
                    </div>
                </div>
            </fieldset>
        </div>
    </form>
</div>

我想要的是最终结果

Take me to
<Address>

Date & Time
<Date> @ <Time>

但是以这样的方式使@ date行的输入响应地扩展和收缩.如果他们也像col-md-n那样表现得那么好,那么在最小的屏幕上我最终会这样做

Take me to
<Address>

Date & Time
<Date>
@
<Time>

Answer 1

以下解决方案与Bootstrap 3完美配合:

<form>
    <div class="form-group">
        <div class="row">
            <div class="col-md-6">
                <label>First name</label>
                <input type="text" class="form-control">
            </div>
            <div class="col-md-6">
                <label>Last name</label>
                <input type="text" class="form-control">
            </div>
        </div>
    </div>
    <div class="form-group">
        <label>Address</label>
        <input type="text" class="form-control">
    </div>
</form>

这将在字段上方标记并排显示名字和姓氏.

Answer 2

你认为可以使用form-inline是正确的

你想要这样的东西:

<div class="row form-inline">
        <fieldset>
            <div class="col-md-12">
                <label for="date">Date &amp; Time</label>
            </div>
            <div class="form-group">
                <input type="text" required="" class="form-control" placeholder="Enter a date" id="date" name="date">
            </div>
            <div class="form-group">
                <label for="time">@</label>
            </div>
            <div class="form-group">
                <input type="text" required="" class="form-control" placeholder="Enter a time" id="time" name="time">                
            </div>
        </fieldset>
    </div>