1

ドロップダウン ボタンを作成し、クリックすると検索バーが表示されますが、見栄えがよくありません。どのクラスを使用して、より適切に適合させることができますか? これは現在の外観です：

私の見栄えの悪い検索バー

  <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Search<b class="caret"></b></a>
          <ul class="dropdown-menu">
          <form>
          <div class="input-prepend">
          <div class="btn-group"><
          <button class="btn" tabindex="-1">Search</button>
          <select class="btn dropdown-toggle" style="width: 140px;">
          <option>Suncor</option>
          <option>Syncrude</option>
          <option>Albian Sands</option>
          </select>
          </div>
          <input type="text">
          </div>
          </form>
          </ul>
          </li>
          </ul>
4

2 に答える 2

2

このboostrapプラグインを使用してselect、ブートストラップを有効にすることができますdropdown。 https://github.com/silviomoreto/bootstrap-select

于 2013-03-13T14:57:57.930 に答える
0

ここでは既存のブートストラップ クラスを利用するのではなく、マイナーなカスタマイズを追加するだけです。これは、問題に取り組むために使用できる少なくとも 1 つのルートです。.dropFormクラスが にどのように追加されたかに注意してください<form>。

http://jsfiddle.net/fhVnJ/3/

CSS

.w140 {
    width: 135px;    
}

.dropForm {
    margin: 0;
    padding: 15px 12px 10px 12px;    
}

HTML 

<div class="navbar">
    <div class="navbar-inner">
        <ul class="nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Link</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Search<b class="caret"></b></a>
              <ul class="dropdown-menu">
                  <form class="dropForm">
                      <div class="input-prepend">
                          <div class="btn-group">
                              <button class="btn" tabindex="-1">Search</button>
                              <select class="w140">
                                  <option>Suncor</option>
                                  <option>Syncrude</option>
                                  <option>Albian Sands</option>
                              </select>
                          </div>
                          <input type="text" />
                      </div>
                  </form>
              </ul>
          </li>
        </ul>
    </div>
</div>

PS - 何をするにしても、HTML マークアップをクリーンアップする必要があります<div class="btn-group"><。開いた山かっこは削除する必要があります。

于 2013-03-04T04:33:55.643 に答える