引导按钮网变圆

时间:2019-03-25 19:09:44

标签: html bootstrap-4

因此,正如我在自举程序按钮的标题角中所说的那样,没有四舍五入,我也不知道为什么。

example

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

代码(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/的网站

1 个答案:

答案 0 :(得分:0)

通过添加内嵌样式margin-right:20px

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

谢谢@Chris W