css - Bootstrap v4 buttongroup(单选按钮)小于按钮

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

我假设您希望它们与下拉按钮具有相同的高度。您的按钮较小，因为其中没有文字。如果您要添加一个空格 ( )，它们将是普通引导按钮的大小。然后，您需要添加 btn-sm 类，使它们与下拉按钮的大小相同(或从下拉按钮中删除该类)。