2

ブートストラップ 3 入力グループを使用して (stackoverflow のように) タグ リストを作成しようとしています。

結果は次のようになり、右側に全高のボタンが表示されます。

これに似ているはずです

私の考慮事項のベースは次のようになります。

<div class="container-fluid">
    <div class="input-group">
        <input type="text" class="form-control">
        <span class="input-group-btn">
            <button class="btn btn-default" type="button">Go!</button>
        </span>
    </div>
</div>

ここからタグリストを作成しようとしています（複数の行が必要であることに注意してください）

HTML:

<div class="container-fluid">
    <div class="input-group">
        <div class="form-control">
            <ul>
                <li><span class="label label-default">Default</span></li>
                <li><span class="label label-primary">Primary</span></li>
                <li><span class="label label-success">Success</span></li>
                ... even more labels ...
                <li><span class="label label-default">Default</span></li>
                <li><span class="label label-primary">Primary</span></li>
                <li><span class="label label-success">Success</span></li>
            </ul>
            <input type="text">
        </div>
        <span class="input-group-btn">
            <button class="btn btn-default" type="button">Go!</button>
        </span>
    </div>
</div>

CSS:

ul {
    padding-left: 0;
    display: inline;
    list-style-type: none;
}
li {
    display: inline-block;
}

フィドルでデモを実行する

ただし、それは期待どおりには機能しません。

4

2 に答える 2

6

タグ部分を作成するには、Tim Schlechter によるbootstrap-tagsinputを使用し、 Bootstrap の入力グループと同様に、次のようなカスタム スタイルでスタイルを設定できます。

タグ入力グループ

jsFiddleおよび Stack スニペットでのデモ

.input-group .bootstrap-tagsinput {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    width: 100%
}
.input-group-btn {
    height: 0px;
}
.input-group-btn .btn {
    height: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.js"></script>


<div class="input-group">
  <input type="text" 
         class="bootstrap-tagsinput form-control" 
         data-role="tagsinput" 
         value="Amsterdam,Washington,Sydney,Beijing,Cairo" />
  <span class="input-group-btn">
    <button class="btn btn-default" type="button">Go!</button>
  </span>
</div>

却下可能なアラート

取り外し可能な要素のスタイルを設定しようとしているだけの場合は、Bootstrap の Dismissable Alertと同様に、次のようなカスタム スタイルで行うことができます。

アラートタグ

jsFiddleおよび Stack スニペットでのデモ:

.alert.alert-tag {
    display: inline-block;
    padding: 5px;
    padding-bottom:2px;
    margin: 5px;
}
.alert-tag.alert-dismissible {
    padding-right: 25px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>

<div class="alert alert-warning alert-dismissible fade in alert-tag" role="alert"> 
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">×</span>
  </button> 
  Label
</div>

于 2014-09-12T21:33:48.027 に答える