Question

帮助！我试图在引导程序布局中对齐一堆行。每行将包含左对齐标签，然后是3个右对齐单选按钮，最后是右对齐输入框。

这是我到目前为止所有的领域都在那里，但布局被打破了。我希望它们都在一行上，但看起来好像标签，单选按钮和输入都在不同的行上。（见附图）

![<div class="row">
  <div class="col-sm-12">
    <div class="form-group">
     <div>
      <label>The Field Label</label>
        <div class="input-append">
          <div class="btn-group pull-right" data-toggle="buttons">
            <label class="btn btn-primary">
              <input type="radio" qid="228" aid="130" value="0">Minimal
            </label>
           <label class="btn btn-primary">
              <input type="radio" qid="228" aid="131" value="1">Moderate
           </label>
           <label class="btn btn-primary">
              <input type="radio" qid="228" aid="132" value="2">Maximum
           </label>
          <input comment="1" optional="1" class="form-control input-small" type="number"              
              placeholder="# of People" qid="228" aid="117" value="">
         </div>
       </div>
     </div>
   </div>
  </div>
</div>]

Sample Image

Answer 1

这更接近你所追求的吗？ http://jsfiddle.net/52VtD/4259/

   <div class="row">
      <div class="col-sm-12">
        <div class="form-group">
         <div>
          <label>The Field Label</label>
            <div class="input-append">
              <div class="btn-group pull-left" data-toggle="buttons">
                <label class="" for='1'>Minimal</label>
                  <input id='1' name='1' type="radio" qid="228" aid="130" value="0"></input>

               <label for="2" class="">Moderate</label>
                  <input id="2" type="radio" qid="228" aid="131" value="1"></input>

               <label class="">Maximum</label>
                  <input type="radio" qid="228" aid="132" value="2"></input>

              <input comment="1" optional="1" class="form-control input-small" type="number"              
                  placeholder="# of People" qid="228" aid="117" value=""></input>
             </div>
           </div>
         </div>
       </div>
      </div>
    </div>

Answer 2

这就是我最终做的事情，想知道是否有更好的方法......

为问题标签和输入字段添加了自定义样式

input.custom {
  display: block;
  width: 125px;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.428571429;
  color: #555555;
  vertical-align: middle;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
          transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

input.custom:focus {
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}

div.question {
    float:left;
    display: inline-block;
    margin-bottom: 5px;
    font-weight: bold;
}

这是HTML，使用btn工具栏进行分组

    <div class='row'>
        <div class='col-sm-12'>
            <div class='question'>Testing 123</div>
            <div class="btn-toolbar pull-right" role="toolbar">
                <div class="btn-group" data-toggle='buttons'>
                    <label class="btn btn-primary">
                    <input type="radio" name="options" id="option1"> Option 1
                    </label>
                    <label class="btn btn-primary">
                    <input type="radio" name="options" id="option2"> Option 2
                    </label>
                    <label class="btn btn-primary">
                    <input type="radio" name="options" id="option3"> Option 3
                    </label>
                </div>
                <input class='custom' type='number' placeholder='# of people'/>
            </div>
        </div>
    </div>

Bootstrap：将标签，无线电和文本框对齐

2 个答案: