bootstrap标签输入宽度

Question

我正在尝试在模式中包含的表单中使用bootstrap tagsinput 像这样

...
<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重现了这个问题

Answer 1

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

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

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

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

Answer 2

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

.bootstrap-tagsinput{
    display: block;
}

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

Bootply Demo

Answer 3

克里斯蒂安几乎猜到了这一点 js中的某个地方：

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

和css：

.bootstrap-tagsinput input {
  width: 10em;
}

Answer 4

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

bootstrap-tagsinput.css

当您添加data-role =＆＃34; tagsinput＆＃34;时，这些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
}

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

Answer 5

这个问题背后的原因是，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;
}

Answer 6

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

style="width: 3em ! important;"

删除样式：

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

这应该可以正常工作。

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

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