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')

这导致所有内容都在一行上，但是“From”被完全覆盖，两个文本框背靠背，没有空格。这是一个简单的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')

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

1 个答案: