下拉按钮的 CSS

Question

我想做一个这样的下拉按钮

但是，我尝试自己制作，但不合适。我的结果是这样的：

这是我的代码

<div class="form-group col-sm-6">
    {!! Form::label('category_id', 'Category:') !!}
    <div class="dropdown dropdown-full-width dropdown-category">
        <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
            <span class="name">
                <span id="category-select">Choose Category</span>
            </span>
        </button>
    <div class="dropdown-menu row">
        <div class="col-md-4">
            <li><strong>By Occasions</strong></li>                                   
            <li><div class="checkbox">
                    <label><input type="radio" name="category['occasions']" class="category-radio">Anniversaries</label>
                </div>
            </li>
            <li><div class="checkbox">
                    <label><input type="radio" name="category['occasions']" class="category-radio">Birthday</label>
                </div>
            </li>
            <li><div class="checkbox">
                    <label><input type="radio" name="category['occasions']" class="category-radio">Congratulations</label>
                </div>
            </li>
            <li><div class="checkbox">
                    <label><input type="radio" name="category['occasions']" class="category-radio">Romance</label>
                </div>
            </li>
            <li><div class="checkbox">
                    <label><input type="radio" name="category['occasions']" class="category-radio">Sympathy</label>
                </div>
            </li>
            <li><div class="checkbox">
                    <label><input type="radio" name="category['occasions']" class="category-radio">Valentine</label>
                </div>
            </li>
        </div>

        <div class="col-md-4">
            <li><strong>By Types</strong></li>                                   
            <li><div class="checkbox">
                    <label><input type="radio" name="category['types']" class="category-radio">Arrangements</label>
                </div>
            </li>
            <li><div class="checkbox">
                    <label><input type="radio" name="category['types']" class="category-radio">Baskets</label>
                </div>
            </li>
            <li><div class="checkbox">
                    <label><input type="radio" name="category['types']" class="category-radio">Bosquets</label>
                </div>
            </li>
            <li><div class="checkbox">
                    <label><input type="radio" name="category['types']" class="category-radio">Flower Board</label>
                </div>
            </li>
            <li><div class="checkbox">
                    <label><input type="radio" name="category['types']" class="category-radio">Hampers</label>
                </div>
            </li>
            <li><div class="checkbox">
                    <label><input type="radio" name="category['types']" class="category-radio">Native and Wild Flowers</label>
                </div>
            </li>
        </div>

        <div class="col-md-4">
            <li><strong>By Flowers</strong></li>                                   
            <li><div class="checkbox">
                    <label><input type="radio" name="category['flowers']" class="category-radio">Crysantemum</label>
                </div>
            </li>
            <li><div class="checkbox">
                    <label><input type="radio" name="category['flowers']" class="category-radio">Jasmine</label>
                </div>
            </li>
            <li><div class="checkbox">
                    <label><input type="radio" name="category['flowers']" class="category-radio">Lily</label>
                </div>
            </li>
            <li><div class="checkbox">
                    <label><input type="radio" name="category['flowers']" class="category-radio">Orchid</label>
                </div>
            </li>
            <li><div class="checkbox">
                    <label><input type="radio" name="category['flowers']" class="category-radio">Rose</label>
                </div>
            </li>
            <li><div class="checkbox">
                    <label><input type="radio" name="category['flowers']" class="category-radio">Tulip</label>
                </div>
            </li>
        </div>
    </div>
    </div>
</div>

Answer 1

我制作了按钮和菜单width: 100%，并将float: left 用于不同的菜单类别。按钮右侧还包括一个插入符号。

.dropdown-category button {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dropdown-menu.row {
  width: 100%;
}

.dropdown-menu.row .col-md-4 {
  float: left;
  width: 33%;
}

.dropdown-menu.row .col-md-4:not(:last-child) {
  border-right: thin solid lightgray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group col-sm-6">
  <div class="dropdown dropdown-full-width dropdown-category">
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
            <span class="name">
                <span id="category-select">Choose Category</span>
            </span>
            <span class="caret"></span>
        </button>
    <div class="dropdown-menu row">
      <div class="col-md-4">
        <li><strong>By Occasions</strong></li>
        <li>
          <div class="checkbox">
            <label><input type="radio" name="category['occasions']" class="category-radio">Anniversaries</label>
          </div>
        </li>
        <li>
          <div class="checkbox">
            <label><input type="radio" name="category['occasions']" class="category-radio">Birthday</label>
          </div>
        </li>
        <li>
          <div class="checkbox">
            <label><input type="radio" name="category['occasions']" class="category-radio">Congratulations</label>
          </div>
        </li>
        <li>
          <div class="checkbox">
            <label><input type="radio" name="category['occasions']" class="category-radio">Romance</label>
          </div>
        </li>
        <li>
          <div class="checkbox">
            <label><input type="radio" name="category['occasions']" class="category-radio">Sympathy</label>
          </div>
        </li>
        <li>
          <div class="checkbox">
            <label><input type="radio" name="category['occasions']" class="category-radio">Valentine</label>
          </div>
        </li>
      </div>

      <div class="col-md-4">
        <li><strong>By Types</strong></li>
        <li>
          <div class="checkbox">
            <label><input type="radio" name="category['types']" class="category-radio">Arrangements</label>
          </div>
        </li>
        <li>
          <div class="checkbox">
            <label><input type="radio" name="category['types']" class="category-radio">Baskets</label>
          </div>
        </li>
        <li>
          <div class="checkbox">
            <label><input type="radio" name="category['types']" class="category-radio">Bosquets</label>
          </div>
        </li>
        <li>
          <div class="checkbox">
            <label><input type="radio" name="category['types']" class="category-radio">Flower Board</label>
          </div>
        </li>
        <li>
          <div class="checkbox">
            <label><input type="radio" name="category['types']" class="category-radio">Hampers</label>
          </div>
        </li>
        <li>
          <div class="checkbox">
            <label><input type="radio" name="category['types']" class="category-radio">Native and Wild Flowers</label>
          </div>
        </li>
      </div>

      <div class="col-md-4">
        <li><strong>By Flowers</strong></li>
        <li>
          <div class="checkbox">
            <label><input type="radio" name="category['flowers']" class="category-radio">Crysantemum</label>
          </div>
        </li>
        <li>
          <div class="checkbox">
            <label><input type="radio" name="category['flowers']" class="category-radio">Jasmine</label>
          </div>
        </li>
        <li>
          <div class="checkbox">
            <label><input type="radio" name="category['flowers']" class="category-radio">Lily</label>
          </div>
        </li>
        <li>
          <div class="checkbox">
            <label><input type="radio" name="category['flowers']" class="category-radio">Orchid</label>
          </div>
        </li>
        <li>
          <div class="checkbox">
            <label><input type="radio" name="category['flowers']" class="category-radio">Rose</label>
          </div>
        </li>
        <li>
          <div class="checkbox">
            <label><input type="radio" name="category['flowers']" class="category-radio">Tulip</label>
          </div>
        </li>
      </div>
    </div>
  </div>
</div>