CSS 引导标签输入宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25295620/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
bootstrap tags input width
提问by lowcoupling
I am trying to use bootstrap tagsinputin a form contained in a modal like this
我正在尝试在这样的模式中包含的表单中使用引导标签输入
...
<div class="form-group">
<label for="myTagLabel">Tags:</label>
<input class="form-control" id="myTag" type="text" data-role="tagsinput">
</div>
As you can see in the image above I can't see why the input doesn't have the width of the containing form.
正如您在上图中所看到的，我不明白为什么输入没有包含表单的宽度。
UPDATEthis http://www.bootply.com/f43d1A0YxKreproduces the issue
更新这个http://www.bootply.com/f43d1A0YxK重现了这个问题
回答by Mohamad
The reason you are seeing this behaviour is because bootstrap-tagsinputactually hides the original inputelement, and in its place adds a div. You are seeing a divelement styled to look like a Bootstrap input element. So any CSS to affect the original input will not produce any changes.
您看到这种行为的原因是因为bootstrap-tagsinput实际上隐藏了原始input元素，并在其位置添加了div. 您会看到一个div元素的样式看起来像 Bootstrap 输入元素。所以任何影响原始输入的 CSS 都不会产生任何变化。
What you want to change is the .bootstrap-tagsinputclass:
你想改变的是.bootstrap-tagsinput类：
.bootstrap-tagsinput {
width: 100% !important;
}
Here's a demo: http://www.bootply.com/1iATJfFM69
这是一个演示：http: //www.bootply.com/1iATJfFM69
回答by Dan
Add display: block;to the .bootstrap-tagsinputclass in your CSS. As noted by Mohamad this class is not present in your own HTML, but when you inspect element/view source you can see that the input is wrapped in a <div class="bootstrap-tagsinput">.
添加display: block;到.bootstrap-tagsinputCSS 中的类。正如 Mohamad 所指出的，这个类不存在于您自己的 HTML 中，但是当您检查元素/视图源时，您可以看到输入被包装在<div class="bootstrap-tagsinput">.
.bootstrap-tagsinput{
display: block;
}
This will overwrite the display: inline-block;that is being inherited.
这将覆盖display: inline-block;正在继承的。
Bootply Demo
Bootply 演示
回答by John Smith
Cristian almost guessed it
somewhere in js:
Cristian 几乎
在 js 的某个地方猜到了：
$('.bootstrap-tagsinput > input').css('width', '');
and in css:
在 css 中：
.bootstrap-tagsinput input {
width: 10em;
}
回答by Tyler Evans
I see the tagsinput plugin you are using comes with its own css file.
我看到您使用的标签输入插件带有自己的 css 文件。
bootstrap-tagsinput.css
These css rules are automatically being added to your input when you add the data-role="tagsinput".
当您添加 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
}
You need to update these so they don't over rule native bootstrap rule.
您需要更新这些，以便它们不会超过本机引导程序规则。
回答by Cristian A. Rodríguez Enríquez
The reason you are seeing this behaviour is because the style actually override the width attribute:
您看到此行为的原因是样式实际上覆盖了宽度属性：
style="width: 3em ! important;"
Remove the style:
删除样式：
$('.bootstrap-tagsinput > input').prop( "style", null );
This should work properly.
这应该可以正常工作。
Additionally, set the desired width with CSS:
此外，使用 CSS 设置所需的宽度：
.bootstrap-tagsinput input { width:100%!important; }
