输入不在字段集中答案

【问题标题】：Inputs are not inside the fieldset输入不在字段集中
【发布时间】：2022-01-29 13:17:24
【问题描述】：

我使用了包含一组输入和标签的字段集。这些输入和标签位于字段集边界之外。如何在字段集边框内放置标签和输入。

.legend-custom {
  font-size: 1.2em !important;
  font-weight: bold !important;
  text-align: left !important;
  width: auto;
  padding: 0 10px;
  border-bottom: none;
  margin-top: -15px;
  background-color: white;
}

.fieldset-custom {
  border: 1px solid #eee !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class="col-md-6 col-sm-12 col-xs-12 col-lg-6">
      <form class="form-horizontal">
        <fieldset class="fieldset-custom form-group">
          <legend class="legend-custom">User:</legend>
          <div class="form-group">
            <div class="row">
              <div class="col-md-3 col-sm-12 col-xs-12 col-lg-3">
                <label class="control-label">Username:</label>
              </div>
              <div class="col-md-9 col-sm-12 col-xs-12 col-lg-9">
                <input type="text" class="form-control" id="username" name="username" placeholder="UserName" />
              </div>
            </div>
          </div>
        </fieldset>
      </form>
    </div>
  </div>
</div>

如您所见，输入位于字段集边界之外。我怎样才能完全用 HTML 来解决这个问题。我尝试为字段集设置填充并且工作正常，但是在某些屏幕尺寸下，标签的末端会稍微隐藏。所以我想先看看是否可以只使用 HTML 来解决。我正在使用引导程序 3.3.7

【问题讨论】：

真的是 3.3.7 版吗？那是很老了。当我在 CSS 中看到 !important 时，我的第一个想法是“出了什么问题？”因为如果 CSS 处理得当，它应该很少需要。
默认情况下 .form-horizontal .form-group 具有负边距 margin-right: -15px 和 margin-left: -15px。尽管强烈建议使用更新后的 Bootstrap 版本，但当前的结构/嵌套表单组的结构不是很好，这是您的问题的一部分。 Quick & Dirty 解决方案是从 .form-horizontal .form-group 中删除这些负边距。

标签： html css twitter-bootstrap

【解决方案1】：

也许只是删除表单组内的div class="row">？我给它一个石灰边框只是为了让它更明显。

.legend-custom {
  font-size: 1.2em !important;
  font-weight: bold !important;
  text-align: left !important;
  width: auto;
  padding: 0 10px;
  border-bottom: none;
  margin-top: -15px;
  background-color: white;
}

.fieldset-custom {
  border: 1px solid lime !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class="col-md-6 col-sm-12 col-xs-12 col-lg-6">
      <form class="form-horizontal">
        <fieldset class="fieldset-custom form-group">
          <legend class="legend-custom">User:</legend>
          <div class="form-group">
            <div class="col-md-3 col-sm-12 col-xs-12 col-lg-3">
              <label class="control-label">Username:</label>
            </div>
            <div class="col-md-9 col-sm-12 col-xs-12 col-lg-9">
              <input type="text" class="form-control" id="username" name="username" placeholder="UserName" />
            </div>
          </div>
        </fieldset>
      </form>
    </div>
  </div>
</div>

【讨论】：

你有水平滚动。这是因为列必须嵌套在行中，而不是其他列。
@isherwood - 是的，但这不是问题，而是 OP 代码中可能存在的错误。
是的，但我们不需要在每次定义列时都使用行类
是的，你做。这是 Bootstrap 方式，如果你不这样做，你可以在这里看到丑陋的结果。见getbootstrap.com/docs/3.3/css/#grid。
这是 cmets 中提到的其他问题，但不是问题：stackoverflow.com/q/22053195/125981

【解决方案2】：

创建一个父 div，您必须在其中放置一个带有表单组类的 div，而不是在子级中放置表单控件，例如在标签和输入中

<form class="form-horizontal">
<fieldset class="fieldset-custom form-group">
<legend class="form-control">User:</legend>
<div class="form-group">
<div class="form-group">
  <div class="form-group">
    <div class="col-md-3 col-sm-12 col-xs-12 col-lg-3">
    <label class="control-control">Username:</label>
    </div>
  </div>
<div class="col-md-9 col-sm-12 col-xs-12 col-lg-9">
<input type="text" class="form-control" id="username" name="username" placeholder="UserName" />
</div>
</div>
</div>
</fieldset>
</form>

【讨论】：

您应该将 sn-p 演示复制下来并进行更改以演示您的解决方案。
你有三次嵌套的.form-group 元素。这是不对的。

【解决方案3】：

我不完全确定您的目标是什么，但您的部分问题是您将行和列与表单组纠缠在一起。后者真的应该在前者里面。请参阅 getbootstrap.com/docs/3.3/css/#forms

然后，您的布局似乎过于复杂。为了简化，我删除了几层。

另外，您应用的列类过多且顺序错误。 Bootstrap 是移动优先和列类级联。将它们从小到大排列，不要重复任何具有相同数值的内容。

.legend-custom {
  font-size: 1.2em;
  font-weight: bold;
}

.fieldset-custom {
  border: 1px solid #eee;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class=" col-xs-12 col-md-6">
      <form class="form-horizontal">
        <div class="row form-group">
          <div class="col-xs-12 col-md-3">
            <fieldset class="fieldset-custom">
              <legend class="legend-custom">User:</legend>
              <label class="control-label">Username:</label>
              <input type="text" class="form-control" id="username" name="username" placeholder="UserName" />
            </fieldset>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

【讨论】：

【解决方案4】：

.legend-custom {
  font-size: 1.2em !important;
  font-weight: bold !important;
  text-align: left !important;
  width: auto;
  padding: 0 10px;
  border-bottom: none;
  margin-top: 15px;
  background-color: white;
}
                        .fieldset-custom {
  border: 1px solid #eee !important;

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/

<div class="container">
<div class="row">
<div class="col-md-6 col-sm-12 col-xs-12 col-lg-6">
<form class="form-horizontal">
<fieldset class="fieldset-custom form-group">
<legend class="legend-custom">User:</legend>
<div class="form-group">
<div class="row">
<div class="col-md-3 col-sm-12 col-xs-12 col-lg-3">
<label class="control-label">Username:</label>
</div>
<div class="col-md-9 col-sm-12 col-xs-12 col-lg-9">
<input type="text" class="form-control" id="username" name="username" placeholder="UserName" />
</div>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>

【讨论】：

您的回答应该包含对您的更改的一些解释。此外，sn-p 编辑器中的 Tidy 按钮是您的朋友。

【解决方案5】：

简单的方法是在.row类中设置左右边距：0 然后在 (.form-horizontal .form-group) 中添加此代码

margin: 0 auto 15px;

【讨论】：

自定义 CSS 布局对于 Bootstrap 库来说并不是一个好主意。

【解决方案6】：

#row-1 {
    margin-right: 5px;
    margin-left: 5px;
}

将上述代码添加到您的css 文件中。

第二行类，就像标签<div class="form-group">之前的<div class="row" id="row-1">

【讨论】：

自定义 CSS 布局对于 Bootstrap 库来说并不是一个好主意。