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;
}

如何让bootstrap下拉列表在引导容器中占据整个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;
}

Bootstrap下拉列表不是全宽

1 个答案: