引导按钮网变圆答案

【问题标题】：Bootstrap button net getting rounded引导按钮网变圆
【发布时间】：2019-03-25 19:09:44
【问题描述】：

正如我在标题中所说，引导按钮的角没有被四舍五入，我不知道为什么。

我查看了其他帖子，但没有找到适合我的解决方案。

代码（layout.hbs）

...
<!-- navbar-nav -->
    <ul class="navbar-nav ml-auto">

        <!--Sell Tickets-->
        <button type="button" class="btn btn-primary" style="margin-right:20px;">Sell tickets</button>
        <!--/Sell Tickets-->

        <!-- Currency Dropdown -->
        <li class="nav-item dropdown d-none d-md-flex">
            <a class="nav-link dropdown-toggle" href="#" role="button" id="dropdownCurrency" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                USD <i class="fa fa-caret-down fa-fw"></i>
            </a>
            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownCurrency">
                <button class="dropdown-item" type="button">USD</button>
                <button class="dropdown-item" type="button">EUR</button>
            </div>
        </li>
        <!-- /Currency Dropdown -->
        <!-- Search Toggle -->
        <li class="nav-item d-sm-none">
            <a href="#" class="nav-link" id="search-toggle"><i class="fa fa-search fa-lg"></i></a>
        </li>
        <!-- /Search Toggle -->

        <!-- Shopping Cart Toggle -->
        <li class="nav-item dropdown ml-1 ml-sm-3">
            <a href="#" class="nav-link" data-toggle="modal" data-target="#cartModal">
                <i class="fa fa-shopping-cart fa-lg"></i>
                <span class="badge badge-pink badge-count">4</span>
            </a>
        </li>
        <!-- /Shopping Cart Toggle -->

        <!-- Notification Dropdown -->
        <li class="nav-item dropdown ml-1 ml-sm-3">
            <a class="nav-link dropdown-toggle" href="#" role="button" id="dropdownNotif" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <i class="fa fa-bell fa-lg"></i>
                <span class="badge badge-info badge-count">3</span>
            </a>
            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownNotif">
                <a class="dropdown-item has-icon" href="#"><i class="fa fa-envelope"></i> 1 New Message</a>
                <a class="dropdown-item has-icon" href="#"><i class="fa fa-comment"></i> 2 New Comments</a>
            </div>
        </li>
        <!-- /Notification Dropdown -->
...

这里是完整代码的网站http://ertagon.cf:3000/

【问题讨论】：

对不起，朋友，我无法访问您的网站，但是....如果您右键单击按钮并选择“检查元素”并按相关顺序查看您的样式，您会发现您的在寻找覆盖预期结果的border-radius 时，罪魁祸首真的很快。
@ChrisW.Hmm weir 你应该可以访问该网站。我确实研究了样式，天哪，我得到了 8 个边界半径匹配项。我只是把它与按钮对齐。谢谢你和许多祝福。

标签： html bootstrap-4

【解决方案1】：

通过添加内联样式修复margin-right:20px

<button type="button" class="btn btn-primary" style="margin-right:20px; border-radius: 8px;">Sell tickets</button>

谢谢，@Chris W

【讨论】：