bootstrap- button link expand out of button

Question

I have written code blow for my page navigation's part:

<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>

My problem is in section blow:

<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>

I created some link button, but clickable area expand out of button! I tried to solve it using giving tag padding and margin zero but it disorder buttons position. How can I limit clickable area just to button?

an other solution. change this. .nav>li { position: relative; float: left; clear: both; } — Malith, May 02 '17 at 14:05

Mihai T · Accepted Answer · 2017-05-02T12:10:56.463

that happens because the button ( .nav>li>a ) has a right-left padding of 15px; you need to remove that and add margin instead

see snippet bellow or jsFiddle

.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 ;
}

<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>

you know when I hover buttons horizontally together, it's all clickable, even the empty area between buttons! — ahoora, May 02 '17 at 10:58
well it doesn't work because you didn't use my code :)) use my code `.nav>li>a{ padding:10px 0 ; margin: 0 15px ;} ` — Mihai T, May 02 '17 at 11:27
I've test your code both in my project and in jsfiddle, lef and right is ok but still top and bottom is clickable — ahoora, May 02 '17 at 12:08
it's because the `.nav li a` has paddings set . paddings are part of the element. so they are clickable. you need to use margins if you want the spaces around elements not to be clickable ; http://stackoverflow.com/questions/5958699/difference-between-margin-and-padding — Mihai T, May 02 '17 at 12:17

bootstrap- button link expand out of button

1 Answers1