css - 带有内联单选按钮和文本框的水平表单

Question

我在 bootstrap 中有一个水平表单，我正在尝试安排一个带有两个文本字段的单选按钮(抱歉，我无法嵌入图像):

但是，我看不到要复制它。我尝试了以下(Jade 标记):

    .col-sm-4
        .form-group
            label.control-label(for='time') Time Range
            .form-inline
                .form-group
                    input(type='radio', id="from", name='time', value='from', data-toggle='radio')
                    label(for="from") From
                .form-group
                    input(type='text', name='first')
                .form-group
                    input(type='text', name='last')

这导致所有内容都在一行中，但“发件人”被完全掩盖，两个文本框背靠背，没有空格。这是一个简单的 CSS 修复，还是我误解了 Bootstrap 3 中的表单布局？任何反馈将不胜感激。

编辑:呈现的 html 是:

<div class="form-group"> 
<label for="time" class="control-label">Time Range</label>
<div class="form-inline">
   <div class="form-group">
       <input type="radio" id="from" name="time" value="from" data-toggle="radio">
       <label for="from">From</label>
   </div>
   <div class="form-group">
         <input type="text" name="first">
   </div>
   <div class="form-group">
        <input type="text" name="last">
   </div>
</div>
</div>

Answer 1

这是你想要的方式:

<div class="form-inline">
   <label for="time" class="control-label">Time Range</label>
   <div class="form-group">
       <input type="radio" id="from" name="time" value="from" data-toggle="radio">
       <label class="control-label" for="from">From</label>
   </div>
   <div class="form-group">
        <input class="form-control" type="text" name="first">
   </div>
   <div class="form-group">
        <label class="control-label">To</label>
        <input class="form-control"  type="text" name="last">
   </div>
</div>

参见 this demo

我不确定如何将其转换为 Jade 标记——我会把它留给你:)

编辑添加:这是在线转换器吐出的内容:

  .form-inline
      label.control-label(for='time') Time Range
      .form-group
        input#from(type='radio', name='time', value='from', data-toggle='radio')
        label.control-label(for='from') From
      .form-group
        input.form-control(type='text', name='first')
      .form-group
        label.control-label To
        input.form-control(type='text', name='last')