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;到.bootstrap-tagsinputCSS中的类.正如Mohamad所指出的,这个类不存在于您自己的HTML中,但是当您检查元素/视图源时,您可以看到输入包含在一个<div class="bootstrap-tagsinput">.

.bootstrap-tagsinput{
    display: block;
}

这将覆盖display: inline-block;正在继承的内容.

Bootply演示

Answer 3

我看到您正在使用的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
}

您需要更新这些，以便它们不会超越本机引导程序规则。