Bootstrap-4没有填充导航

时间:2016-08-04 13:58:26

标签: html twitter-bootstrap bootstrap-4

<ul class="nav navbar-nav">
        <li class="nav-item-dropdown">
            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
                SLIDES
            </a>
            <div class="dropdown-menu" aria-labelledby="Preview">
                <a class="dropdown-item" href="#">Événements Importants</a>
                <a class="dropdown-item" href="#">Rappels des bonnes pratiques</a>
                <a class="dropdown-item" href="#">Ecran Sonar</a>
            </div>
        </li>
        <li class="nav-item-dropdown">
            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
                BANDEAU
            </a>
            <div class="dropdown-menu" aria-labelledby="Preview">
                <a class="dropdown-item" href="#">Rappel CRA</a>
                <a class="dropdown-item" href="#">Visite Client</a>
                <a class="dropdown-item" href="#">Nouvelle version</a>
            </div>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">POP-UP</a>
        </li>
    </ul>

这是我的代码

问题是没有填充,这是正常的吗?这是它呈现的图片:

http://img4.hostingpics.net/pics/248061Screenshotfrom20160804155752.png

其他问题是它可以在同一行显示2个链接:/

1 个答案:

答案 0 :(得分:1)

我无法让您的下拉列表工作,但您可以为a元素添加一些填充:

在HTML中:

...
<a class="dropdown-item pad15" href="#">Événements Importants</a>
...

在CSS中:

.pad15 {
    padding: 15px;
}

这很简单,但我想这就是你要找的东西。

更新:没有CSS文件

...
<a class="dropdown-item" style="padding:15px;" href="#">Événements Importants</a>
...