如何防止下拉切换按钮改变它自己的宽度

Question

＆＃13;

＆＃13;

        .nav {
        / / display: flex;
            width: 100%;
        }


        .navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover {
            color: #333;
            background-color: transparent;
        }

        .nav > li {
            display: inline-block !important;
        }

        .number_three_li {
            float: right;
        }

        @media (min-width: 768px) {
            .navbar-nav > li.number_three_li {
                float: right;
            }
        }

＆＃13;

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<nav class="navbar navbar-default navbar-fixed-top" style="background-color: transparent; max-height: 50px;">
    <div class="container-fluid" style="padding-right: 0px;">
        <ul class="nav navbar-nav" style="margin-top: 0px;margin-bottom: 0px;padding-left: 0px;">


            <li class="number_three_li dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"
                                                    style="padding: 15px"><i
                    class="glyphicon glyphicon-option-horizontal" style="color:royalblue;"></i></a>
                <ul class="dropdown-menu" style="z-index: 3; left: auto; right: 0;">
                    <li><a href="#">HTML</a></li>
                    <li><a href="#">CSS</a></li>
                    <li><a href="#">JavaScript</a></li>
                </ul>
            </li>


        </ul>
    </div>
</nav>

<p style="padding-top:100px">It happend when browser's width < 768</p>

＆＃13;

＆＃13;

＆＃13;

当我点击下拉按钮时，它的按钮宽度会发生变化。

之前：

点击后：

但我想要的是：按钮永远不会改变，点击的按钮效果也会被删除，但只有下拉菜单才会打开。

喜欢这样：

如何解决？

Answer 1

缩进问题

您可以添加 server.subscribe_server_callback(CallbackType.ItemSubscriptionCreated, create_monitored_items) server.subscribe_server_callback(CallbackType.ItemSubscriptionModified, modify_monitored_items) server.subscribe_server_callback(CallbackType.ItemSubscriptionDeleted, delete_monitored_items)

吗？

text-align:right;

背景色问题

添加此css以在打开时保持背景透明

.nav > li a.dropdown-toggle {
   text-align: right;
}

代码段

＆＃13;

＆＃13;

.navbar-default .nav.navbar-nav>.open>a, 
.navbar-default .nav.navbar-nav>.open>a:focus, 
.navbar-default .nav.navbar-nav>.open>a:hover {
    color: #555;
    background-color: transparent;  
}

＆＃13;

.nav {
        // display: flex;
            width: 100%;
        }


        .navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover {
            color: #333;
            background-color: transparent;
        }

        .nav > li {
            display: inline-block !important;
        }
        
         .nav > li a.dropdown-toggle {
            text-align: right;
         }
         
             .navbar-default .nav.navbar-nav>.open>a, .navbar-default .nav.navbar-nav>.open>a:focus, .navbar-default .nav.navbar-nav>.open>a:hover {
        color: #555;
        background-color: transparent;  
    }

        .number_three_li {
            float: right;
        }

        @media (min-width: 768px) {
            .navbar-nav > li.number_three_li {
                float: right;
            }
        }

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用：

.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover {
    background-color: transparent!important;
}
.nav > li a.dropdown-toggle {
   text-align: right;
}

＆＃13;

＆＃13;

.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover {
    background-color: transparent!important;
}
.nav > li a.dropdown-toggle {
   text-align: right;
}
        .nav {
        / / display: flex;
            width: 100%;
        }


        .navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover {
            color: #333;
            background-color: transparent;
        }

        .nav > li {
            display: inline-block !important;
        }

        .number_three_li {
            float: right;
        }

        @media (min-width: 768px) {
            .navbar-nav > li.number_three_li {
                float: right;
            }
        }

＆＃13;

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<nav class="navbar navbar-default navbar-fixed-top" style="background-color: transparent; max-height: 50px;">
    <div class="container-fluid" style="padding-right: 0px;">
        <ul class="nav navbar-nav" style="margin-top: 0px;margin-bottom: 0px;padding-left: 0px;">


            <li class="number_three_li dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"
                                                    style="padding: 15px"><i
                    class="glyphicon glyphicon-option-horizontal" style="color:royalblue;"></i></a>
                <ul class="dropdown-menu" style="z-index: 3; left: auto; right: 0;">
                    <li><a href="#">HTML</a></li>
                    <li><a href="#">CSS</a></li>
                    <li><a href="#">JavaScript</a></li>
                </ul>
            </li>


        </ul>
    </div>
</nav>

<p style="padding-top:100px">It happend when browser's width < 768</p>

＆＃13;

＆＃13;

＆＃13;