Bootstrap 水平表单中的备用 HTML 样式答案

【问题标题】：Alternate HTML Styling in Bootstrap Horizontal FormBootstrap 水平表单中的备用 HTML 样式
【发布时间】：2014-10-02 06:29:44
【问题描述】：

我有一些主要由输入控件组成的表单，但有时水平表单具有如下变体：

<div class="form-group">
   <span class="col-md-3 control-label">Features</span>
   <div class="col-md-9">
     <span>This is not available.</span>
   </div>
</div>

或者有时我有多个控件：

<span class="col-md-3 control-label">Payment</span>
<div class="col-md-9">
  <input value="2" name="CustomerPaymentOption" type="radio">
  <span>Credit Card</span>
</div>

标签内容与控制标签并没有完全对齐。我试图模仿表单控制的 css 类来让跨度内容排列起来，但在我的场景中它从来没有这么好过。关于让内容排队的任何建议？

【问题讨论】：

标签： css html twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

如果您只想打印静态文本，可以使用静态表单控件 (http://getbootstrap.com/css/#forms-controls-static)。

如果您想使用多个复选框和单选按钮，您还可以使用引导程序所避免的。见http://getbootstrap.com/css/#forms-controls。

你想要这样的东西吗？ http://www.bootply.com/ztbj1dCJrP

【讨论】：

【解决方案2】：

它的简单添加类到 div（这里是我的标签）

<span class="col-md-3 control-label">Payment</span>
<div class="col-md-9 my-label">
  <input value="2" name="CustomerPaymentOption" type="radio">
  <span>Credit Card</span>
</div>

和css

.my-label{
    display:inline-block;
}

小提琴http://jsfiddle.net/harshdand/a4n4nc1r/

对于多个http://jsfiddle.net/harshdand/a4n4nc1r/2/

【讨论】：