47

我有一个混合了可编辑和只读字段的表单，我想使用 Bootstrap 设置样式。可编辑字段正确对齐，但只读字段未正确对齐，如下图所示：

只读字段

我使用的 HTML 是：

<form class="form-horizontal">
<div class="control-group">
  <label class="control-label">Name</label>
  <div class="controls">
    John Smith
  </div>
</div>
<div class="control-group">
  <label class="control-label" for="date_of_birth">Date of Birth</label>
  <div class="controls">
    <input name="date_of_birth" id="date_of_birth" size="16" type="text" value="" />
    <span class="help-inline">dd/mm/yyyy</span>
  </div>
</div>
</form>

我不想为无法编辑的字段显示只读输入，因为当用户无法在框中单击时会感到困惑/沮丧，而这些字段永远无法编辑，所以它不会将它们显示为禁用/只读真的没有意义。我只想显示文本并与标签正确对齐。有没有办法可以通过在 Bootstrap 中使用某些东西或覆盖默认样式来做到这一点？

我的问题类似于这个问题，没有得到回答（至少不是对原始问题的回答），并且由于 Bootstrap 在过去 7 个月中发布了多个版本，我认为如果有任何变化，值得再次询问.

4

7 回答 7

114

从 bootstrap 3.0 开始，添加了一个类来处理这个问题

当您需要在水平表单中的表单标签旁边放置常规的静态文本时，请.form-control-static使用<p>

<div class="controls">
  <p class="form-control-static">Lorem Ipsum and then some</p>
</div>
于 2013-08-14T19:54:08.460 回答
22

创建您自己的样式并将其应用如下 -

.controls.readonly
{
  padding-top: 5px;
}

<div class="control-group">
  <label class="control-label">Name</label>
  <div class="controls readonly">
    John Smith
  </div>
</div>

Bootstrap 并没有涵盖所有可能发生的情况，您需要制作自己的样式。

于 2012-11-09T15:43:59.207 回答
2

如果您使用的是 Bootstrap 3，请务必使用form-control-static该类。如果这不是一个选项，您可以使用control-label该类并拥有另一个删除粗体字体粗细的类。

在您的 html 中：

<div class="control-group">
  <label class="control-label">Name</label>
  <label class="control-label static-text">
    John Smith
  </label>
</div>

在你的 CSS 中：

.static-text {
    font-weight: normal;
}

只需确保在 html 中的属性之后static-text列出类。这样它就会覆盖建立的 by 。 control-labelclassfont-weightcontrol-label

在您的情况下，您可能还想调整字体大小。

当然，如果 bootstrap 更改了control-label类的 CSS 属性，您可能需要返回并调整您的static-text类。

于 2016-07-29T20:34:02.970 回答
1

为了添加到 Simon 的帖子中，我添加display: inline-block;了 CSS。

这是为了匹配标签和文本的显示。

于 2014-10-06T15:11:55.943 回答
1

就像@pwaring 说的那样，对我来说还需要更多样式：

.controls.readonly{
 font-size: 14px;
 line-height: 20px;
 padding-top: 5px;
}

<div class="controls readonly">
    Lorem Ipsum and then some
  </div>
于 2014-08-25T13:44:46.310 回答
0

这是使用 chris vdp 的答案，并为那些没有发现 chris 的答案显而易见的人（比如我和挪威的 Eduardo）提供完整的 HTML。

我可能会显示比需要更多的代码，但我发现上述解决方案不在我大部分时间需要的“复制粘贴级别”。:-) 我想为您提供一些我知道有效的东西，并且可以以一种非常明显的方式粘贴到您的代码中。只需将此结构插入 HTML 的任何位置即可。

注意：这适用于并且需要 Bootstrap 3。

<form class="form-horizontal" role="form">
    <div class="control-group">
        <label for="personName" class="control-label col-sm-2">Name</label>
        <div class="controls col-sm-10">
            <p id="personName" class="form-control-static">John Smith</p>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label col-sm-2" for="date_of_birth">Date of Birth</label>
        <div class="controls">
            <input class="col-sm-3" name="date_of_birth" id="date_of_birth" size="16" type="text" value="" />
            <span class="help-inline col-sm-3">dd/mm/yyyy</span>
        </div>
    </div>
</form>
于 2016-12-30T02:46:05.750 回答
-1

您可以扩展controls类：

<style>
.controls.aligncorrect{
  padding-top: 5px;
}
</style>

然后像这样使用它：

<div class="controls aligncorrect" style="padding-top:5px;">
    John Smith
  </div>
于 2012-11-09T12:07:47.943 回答