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有margin-button，如果是，我该如何删除它。感谢

Answer 1

无法重现您的问题，所以我的假设是您有一些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>

<强>更新：

如果您需要覆盖表单组类，只需将另一个类添加到使用该类的元素中，如下所示：

CSS：

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

HTML：

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

Answer 2

输入字段的边距通常通过.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的行为。

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

2 个答案: