bootstrap tags input width

问题

I am trying to use bootstrap tagsinput in 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.

UPDATE this http://www.bootply.com/f43d1A0YxK reproduces the issue

回答1:

The reason you are seeing this behaviour is because bootstrap-tagsinput actually hides the original input element, and in its place adds a div. You are seeing a div element styled to look like a Bootstrap input element. So any CSS to affect the original input will not produce any changes.

What you want to change is the .bootstrap-tagsinput class:

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

Here's a demo: http://www.bootply.com/1iATJfFM69

回答2:

Add display: block; to the .bootstrap-tagsinput class 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">.

.bootstrap-tagsinput{
    display: block;
}

This will overwrite the display: inline-block; that is being inherited.

Bootply Demo

回答3:

Cristian almost guessed it
somewhere in js:

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

and in css:

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

回答4:

I see the tagsinput plugin you are using comes with its own css file.

bootstrap-tagsinput.css

These css rules are automatically being added to your input when you add the data-role="tagsinput".

.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.

回答5:

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:

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

来源：https://stackoverflow.com/questions/25295620/bootstrap-tags-input-width

标签

css

twitter-bootstrap

twitter-bootstrap-3

bootstrap-tags-input