web-dev-qa-db-ja.com

bootstrapタグ入力幅

このようなモーダルに含まれるフォームでbootstrap tagsinput を使用しようとしています

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

上の画像を見るとわかるように、入力に含まれるフォームの幅がない理由がわかりません。

[〜＃〜] update [〜＃〜]this http://www.bootply.com/f43d1A0YxK は、問題

enter image description here

csstwitter-bootstraptwitter-bootstrap-3bootstrap-tags-input
16
lowcoupling

この動作が見られる理由は、bootstrap-tagsinputは実際には元のinput要素を非表示にし、代わりにdivを追加します。 Bootstrap input要素のようにスタイル設定されたdiv要素が表示されています。したがって、元の入力に影響を与えるCSSは変更を生成しません。

変更したいのは.bootstrap-tagsinputクラス：

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

これがデモです： http://www.bootply.com/1iATJfFM69

42
Mohamad

CSSのdisplay: block;クラスに.bootstrap-tagsinputを追加します。 Mohamadによって指摘されているように、このクラスは独自のHTMLには存在しませんが、要素/ビューのソースを調べると、入力が<div class="bootstrap-tagsinput">でラップされていることがわかります。

.bootstrap-tagsinput{
    display: block;
}

これにより、継承されているdisplay: inline-block;が上書きされます。

Bootplyデモ

8
Dan

クリスチャンはほとんどそれを推測した
jsのどこか：

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

そしてCSSで：

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

あなたが使用しているtagsinputプラグインには、独自のcssファイルが付属しています。

bootstrap-tagsinput.css

これらのcssルールは、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
}

ネイティブのbootstrapルールを上書きしないように、これらを更新する必要があります。

0
Tyler Evans