引导下拉不是完全宽度。

Question

由于某种原因，我的鞋带下拉式还远远不够宽，我需要它。

下面是我正在谈论的一幅图片：

​

​

国家和城市是自举下降，我已经设计了相当多，以完全改变外观。它们每个都在一个集装箱行内。他们各占6列，使它被分成两半。我只想让他们把绿色的一半都拿出来。这是我的密码。

HTML：

<div id="find-vegan-products-page" style="height:900px;">
  <div class="form-background">
    <div class="container-fluid" style="padding: 40px;">
      <h1>Filter Your Search!</h1>
      <form role="form">
        <div class="row">
          <div class="form-group col-sm-6">
            <div class="dropdown">
              <button class="btn btn-primary dropdown-toggle input-control no-box-shadow" type="button" data-toggle="dropdown">Country
              </button>
              <ul class="dropdown-menu">
                <li><a href="#">HTML</a>
                </li>
                <li><a href="#">CSS</a>
                </li>
                <li><a href="#">JavaScript</a>
                </li>
              </ul>
            </div>
          </div>
          <div class="form-group col-sm-6">
            <div class="dropdown">
              <button class="btn btn-primary dropdown-toggle input-control no-box-shadow" type="button" data-toggle="dropdown">City
              </button>
              <ul class="dropdown-menu">
                <li><a href="#">HTML</a>
                </li>
                <li><a href="#">CSS</a>
                </li>
                <li><a href="#">JavaScript</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>

CSS：

.input-control {
    height: 5rem;
    background-color: transparent;
    border-top-style: none;
    border-right-style: none;
    border-bottom: 1px solid dimgray;
    border-left-style: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-radius: 0;
}
button.input-control:hover {
    background-color: none;
    background: none;
}
.btn-primary.active,
.btn-primary:active,
.open>.dropdown-toggle.btn-primary {
    /* color: #fff; */

    background-color: transparent;
    border-color: transparent;
}
.btn:focus,
.btn:active {
    outline: none !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    color: #fff;
    background-color: transparent;
    border-color: dimgray;
    box-shadow: none;
}

.btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary:active.focus, .btn-primary:active:focus, .btn-primary:active:hover, .open>.dropdown-toggle.btn-primary.focus, .open>.dropdown-toggle.btn-primary:focus, .open>.dropdown-toggle.btn-primary:hover {
    color: #fff;
    background-color: transparent;
    border-color: dimgray;
}

.btn {
    font-weight: 100;
}


.btn-primary:hover {
    color: #fff;
    background-color: transparent;
    border-color: dimgray;
}

dropdown > button {
    background:none;
    border:none;
    box-shadow:none;
}



.form-background {
    background: rgba(149, 246, 102, .5);
}

#find-vegan-products-page {
margin-top: 100px; /*separate the div from top of the page*/
padding: 100px; /*or whatever value to give the div space */
}

.btn.btn-default:focus {
border:none;
outline:0;

}

.form-control::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    white;
    font-weight: 100;
}
.form-control:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    white;
   opacity:  1;
   font-weight: 100;
}
.form-control::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    white;
   opacity:  1;
   font-weight: 100;
}
.form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    white;
   font-weight: 100;
}
.form-control:placeholder-shown { /* Standard (https://drafts.csswg.org/selectors-4/#placeholder) */
  color:    white;
  font-weight: 100;
}

如何使引导下拉列表占据引导容器中的全部6列？唯一看上去不同的是底部边框将达到6个容器列的全部宽度。

Answer 1

我做了以下工作：

.input-control {
    border:none; /* Remove border bottom */
}

.dropdown, .dropup {
    border-bottom: 1px solid #696969; /* Add bottom border to drop down instead */
}

.dropdown-menu {
    width:100%; /* Make drop down 100% width OPTIONAL */
}

我在下拉菜单上放置了一个可选的100%宽度，以防您希望边框匹配。

更新：

拥有按钮的全宽度也将有助于可用性。

.input-control {
    width:100%;
    text-align:left;
}