如何删除输入字段和包含 div 之间的空格

Question

我的页面上有这个

还有这段代码

 <div class="col-md-9 .list-title-input" style="border:1px solid red;" >
    <?= $form->field($model, 'product_title')->textInput([  ]); ?>

 </div>

如何删除文本输入字段和包含 div 之间的底部空间，以便在 div 之后立即保存草稿

我添加了css来控制这样的输入

.list-title-input input{
width:100%;
height:30px;
position: relative;
border-radius: 2px;
border: 1px solid #ccc;
box-shadow: 0 0 0 rgba(0, 0, 0, 0.1);
background: #ffffff;


}

我没有在输入中添加边距，输入字段是在我的 yi2 活动表单中生成的，所以我想问题就在那里，因为如果我不使用活动表单，一切都很好 我希望有人能帮我解决这个问题

我认为问题在于当我检查元素时自动生成的输入字段，我发现添加了一个带有类 form-group 的 div，所以 bootstrap form-group 有边距按钮，如果有，我该如何删除它。谢谢

Answer 1

输入字段的边距通常通过.form-group 类应用，即

.form-group {
    margin-bottom: 10px;
}

应用于输入字段的包装器。

<div class="form-group field-user-name required">
<label class="control-label" for="user-name">Name</label>
<input id="user-name" class="form-control" name="User[name]" maxlength="255" type="text">
<div class="help-block"></div>
</div>

您可以在启动_form.php中的文件时更改此类

<?= $form->field($model, 'name')->textInput(['maxlength' => true]) ?>

因此，您想要的类的文件代码将是：

<?= $form->field($model, 'name', ['options' => ['class' => 'MY-CLASS-WITH-NO-MARGIN']])->textInput(['maxlength' => true]) ?>

那么输出将是：

<div class="MY-CLASS-WITH-NO-MARGIN field-user-name required">
<label class="control-label" for="user-name">Name</label>
<input id="user-name" class="form-control" name="User[name]" maxlength="255" type="text">
<div class="help-block"></div>
</div>

因此，您可以通过这种方式控制包装 div 的行为。

Answer 2

无法重现您的问题，所以我假设您有一些 CSS 定义了 input 字段的边距。您可以这样做来覆盖该边距值。

.no-margin {
  margin: 0 !important;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md-9" style="border: 1px solid red;">
  <input type="text" class="no-margin" />
</div>

更新：

如果您需要覆盖 form-group 类，只需向使用该类的元素添加另一个类，如下所示：

CSS：

.form-group.no-padding {
 padding: 0 !important;
}

HTML：

<div class="form-group no-padding">
   ...
</div>