20

我正在尝试以包含在这样的模式中的表单使用引导标签输入

...
<div class="form-group">
                            <label for="myTagLabel">Tags:</label> 
                            <input class="form-control" id="myTag"  type="text" data-role="tagsinput">
                        </div>

正如您在上图中看到的，我看不出为什么输入没有包含表单的宽度。

更新 这个http://www.bootply.com/f43d1A0YxK重现了这个问题

在此处输入图像描述

4

6 回答 6

50

您看到此行为的原因是因为bootstrap-tagsinput实际上隐藏了原始input元素，并在其位置添加了div. 您会看到一个div样式看起来像 Bootstrap 输入元素的元素。所以任何影响原始输入的 CSS 都不会产生任何变化。

您要更改的是.bootstrap-tagsinput类：

.bootstrap-tagsinput {
  width: 100% !important;
}

这是一个演示： http: //www.bootply.com/1iATJfFM69

于 2014-08-16T14:52:49.803 回答
9

添加display: block;到.bootstrap-tagsinputCSS 中的类。正如 Mohamad 所指出的，这个类不存在于您自己的 HTML 中，但是当您检查元素/视图源时，您可以看到输入包含在<div class="bootstrap-tagsinput">.

.bootstrap-tagsinput{
    display: block;
}

这将覆盖display: inline-block;正在继承的。

Bootply 演示

于 2014-08-17T01:22:25.247 回答
2

Cristian 几乎
在 js 的某个地方猜到了：

$('.bootstrap-tagsinput > input').css('width', '');

在 CSS 中：

.bootstrap-tagsinput input {
  width: 10em;
}
于 2015-07-20T14:32:39.817 回答
0

我看到您使用的 tagsinput 插件带有自己的 css 文件。

bootstrap-tagsinput.css

当您添加 data-role="tagsinput" 时，这些 css 规则会自动添加到您的输入中。

.bootstrap-tagsinput {
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  display: inline-block;
  padding: 4px 6px;
  margin-bottom: 10px;
  color: #555;
  vertical-align: middle;
  border-radius: 4px;
  max-width: 100%;
  line-height: 22px;
  cursor: text;
}
.bootstrap-tagsinput input {
  border: none;
  box-shadow: none;
  outline: none;
  background-color: transparent;
  padding: 0;
  margin: 0;
  width: auto !important;
  max-width: inherit;          //Try change this to 100% !important;
  display: block;             // Add this in
}

您需要更新这些，以免它们超过规则本机引导规则。

于 2014-08-13T22:51:47.203 回答
0

这个问题背后的原因是，bootstrap-tagsinput 类正在使用display: inline-block;

解决方案是，只需display: inline-block;将display: block;

变更前

.bootstrap-tagsinput {
  display: inline-block;
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  padding: 4px 6px;
  margin-bottom: 10px;
  color: #555;
  vertical-align: middle;
  border-radius: 4px;
  max-width: 100%;
  line-height: 22px;
  cursor: text;
}

改变后

.bootstrap-tagsinput {
  display: block;
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  padding: 4px 6px;
  margin-bottom: 10px;
  color: #555;
  vertical-align: middle;
  border-radius: 4px;
  max-width: 100%;
  line-height: 22px;
  cursor: text;
}
于 2021-04-22T05:58:36.537 回答
-1

您看到此行为的原因是样式实际上覆盖了 width 属性：

style="width: 3em ! important;"

删除样式：

$('.bootstrap-tagsinput > input').prop( "style", null );

这应该可以正常工作。

此外，使用 CSS 设置所需的宽度：

.bootstrap-tagsinput input { width:100%!important; }
于 2015-07-01T16:43:58.797 回答