Question

我在Rails 3.2.16中使用simple_form_for，在表单中使用Twitter Bootstrap。但在我的所有形式上。我正在使用form-horizontal课程。然而，我的所有文本元素都显示在其标签的下方和右侧。这是HTML：

<div class="control-group text optional">
  <label class="text optional" for="user_email">Email</label>
  <div class="controls">
    <input id="user_email" class="text optional" type="text" value="adrian.klingel@myfitment.com" size="30" name="user[email]">
  </div>
</div>

除了屏幕截图，这里是屏幕显示内容的表示：

Email:
               <Text box for email>

我正在使用Firebug尝试调试。我没有自定义CSS。所有设置都从bootstrap css继承。

标签设置为：

display: block;

Bootstrap中有许多.form-horizontal设置。

我可以在布局视图中看到.controls div被向右填充180px。但我无法理解是什么迫使它失望。它需要与其标签一致。作为一个有编程背景的人，我没有用语言描述我对CSS的挫败感。我只是无法得到它。不是因为缺乏尝试。

更新：

我能够通过将float:left;应用于标签来实现我想要的目标，但是我很惊讶打包的form-horizontal类已经没有了。我不确定他们认为form-horizontal应该是什么意思。

Answer 1

使用float: left;实现您所说的内容的另一种有用方法是使用display: inline-block;代替。

display: block;迫使换行。

在这里阅读更多相关信息： CSS display: inline vs inline-block

我的CSS中的某些东西使我的文本元素在其标签下方显示为一行

1 个答案: