Question

我试图获得一个下拉菜单和一个多切换（单选按钮）以保持彼此。但是，我无法理解为什么它们会出现不同大小...我使用bootstrap 4.0。

这是我标题的html片段

<div id="header">
    <p style="margin:0px;"><img src="assets/logo2.svg" width="63" height="14" style="left: 0px; top: 0px; border: 0;"></p>
    <h1 id="title">Price Indicies</h1>
    <div id="myDropdown" class="dropdown float-right">
        <button class="btn btn-primary btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" aria-haspopup="true" aria-expanded="false" data-toggle="dropdown">Boroughs
        </button>
        <div class="dropdown-menu">
            <a class="dropdown-item" href="#">Boroughs</a>
            <a class="dropdown-item" href="#">Brooklyn hoods</a>
            <a class="dropdown-item" href="#">Manhattan hoods</a>
            <a class="dropdown-item" href="#">Queens hoods</a>
        </div>
    </div>
    <div class="btn-group float-right" data-toggle="buttons">
        <label class="btn btn-primary active">
            <input type="radio" name="options" id="sales" autocomplete="off">sales</input>
        </label>
        <label class="btn btn-primary">
            <input type="radio" name="options" id="rentals" autocomplete="off">rentals</input>
        </label>
   </div>
</div>

这是实时代码： https://run.plnkr.co/64KRhkyz35xXoeMw/

Answer 1

我假设你希望他们和下拉按钮一样heihgt。您的按钮较小，因为其中没有文字。如果你要添加一个空格（），它们将是正常引导按钮的大小。然后，您需要添加localstorage类，使其与下拉按钮的大小相同（或从下拉按钮中删除该类）。

Answer 2

您可以使用以下css来获得相同尺寸的下拉列表和单选按钮

   label.btn.btn-primary {
      padding :13px;
  }

Bootstrap v4 buttongroup（单选按钮）小于按钮

2 个答案: