bootstrap-按钮链接展开按钮

Question

我为我的页面导航部分编写了代码：

<nav class="navbar navbar-inverse noPadding">
        <div class="container-fluid">
            <div class="navbar-header">
                <a href="#" class="navbar-brand">A</a>
            </div>
            <ul class="nav navbar-left navbar-nav">
                <li><a href="#"><button class="btn btn-danger btn_no_border">هشدارها</button></a></li>
                <li><a href="#"><button class="btn btn-success btn_no_border">اقلام جدید</button></a></li>
                <li><a href="#"><button class="btn btn-primary btn_no_border">ناموجود</button></a></li>
                <li><a href="#"><button class="btn btn-info btn_no_border">مشتریان جدید</button></a></li>
                <li><a href="#"><button class="btn btn-warning btn_no_border">همکاران جدید</button></a></li>
                <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#"><button class="btn-default btn_no_border navbar-btn">B<sapn class="caret"></sapn></button></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">نمایه</a></li>
                        <li><a href="#">خروج</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </nav>

我的问题在于打击：

<ul class="nav navbar-left navbar-nav">
            <li><a href="#"><button class="btn btn-danger btn_no_border">هشدارها</button></a></li>
            <li><a href="#"><button class="btn btn-success btn_no_border">اقلام جدید</button></a></li>
            <li><a href="#"><button class="btn btn-primary btn_no_border">ناموجود</button></a></li>
            <li><a href="#"><button class="btn btn-info btn_no_border">مشتریان جدید</button></a></li>
            <li><a href="#"><button class="btn btn-warning btn_no_border">همکاران جدید</button></a></li>
            <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#"><button class="btn-default btn_no_border navbar-btn">B<sapn class="caret"></sapn></button></a>
                <ul class="dropdown-menu">
                    <li><a href="#">نمایه</a></li>
                    <li><a href="#">خروج</a></li>
                </ul>
            </li>
        </ul>

我创建了一些链接按钮，但可点击的区域扩展了按钮！我尝试使用赋予标记填充和边距为零来解决它，但它无序按钮位置。 如何将可点击区域限制为按钮？

Answer 1

发生这种情况是因为按钮（.nav>li>a）的左右填充为15px;你需要删除它并添加边距

请参阅下面的代码段或jsFiddle

＆＃13;

＆＃13;

.navbar .nav>li>a {
	padding:0;
	margin:10px 15px;
	display:inline-block;
	width:auto;
}
a.navbar-brand {
	padding:0;
	margin:15px;
}
.navbar-nav {
margin:7.5px 0 ;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse noPadding">
        <div class="container-fluid">
            <div class="navbar-header">
                <a href="#" class="navbar-brand">A</a>
            </div>
            <ul class="nav navbar-left navbar-nav">
                <li><a href="#"><button class="btn btn-danger btn_no_border">هشدارها</button></a></li>
                <li><a href="#"><button class="btn btn-success btn_no_border">اقلام جدید</button></a></li>
                <li><a href="#"><button class="btn btn-primary btn_no_border">ناموجود</button></a></li>
                <li><a href="#"><button class="btn btn-info btn_no_border">مشتریان جدید</button></a></li>
                <li><a href="#"><button class="btn btn-warning btn_no_border">همکاران جدید</button></a></li>
                <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#"><button class="btn-default btn_no_border navbar-btn">B<sapn class="caret"></sapn></button></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">نمایه</a></li>
                        <li><a href="#">خروج</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </nav>

＆＃13;

＆＃13;

＆＃13;