Question

在 Bootstrap 3 中，可以这样做：

效果是在<li>内的.navbar元素上应用纯色背景色（在这种情况下为橙色）

此处有一个小提琴示例：https://jsfiddle.net/p1vm4aeo/

唯一的自定义CSS是橙色背景，其余的是Bootstrap 3：

.orange-bg {
  background-color: orange;
}

标记如下：

<nav class="navbar navbar-fixed-top navbar-default" role="navigation">
    <div id="navbar-collapse-1" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li class="dropdown orange-bg">
                <a href="#">Foo</a>
            </li>
        </ul>
    </div>
</nav>

同样，这是所有标准的Bootstrap 3标记，并附加了.orange-bg。

在 Bootstrap 4 中，这似乎无法实现，因为<li>中的.navbar没有占据导航栏的全部高度。效果是这样的：

这里的小提琴是：https://jsfiddle.net/20ehqxsy/

标记中唯一的区别是Navbar类适用于Bootstrap 4而不是3（例如.navbar-expand-lg）：

<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light navbar-default" role="navigation">
  <div id="navbar-collapse-1" class="collapse navbar-collapse">
    <ul class="nav navbar-nav">
            <li class="dropdown orange-bg">
                <a href="#">Foo</a>
            </li>
        </ul>
  </div>
</nav>

在使用Bootstrap 4时，是否有任何方法可以获得与Bootstrap 3中相同的效果？

Answer 1

只需将padding:0应用于导航即可。下面是经过测试的有效解决方案

要使导航栏具有响应性和可折叠性，可以使用padding:16px，请参考Navbar

.navbar-expand-xl|lg|md|sm

nav {
  padding: 0px!important;
}

.orange-bg {
  background-color: orange!important;
}

Answer 2

您的version: '3.3' services: db: image: 'mysql:5.7' volumes: - './db-data:/var/lib/mysql' restart: always environment: null MYSQL_ROOT_PASSWORD: somewordpress MYSQL_DATABASE: wordpress MYSQL_USER: wordpress MYSQL_PASSWORD: wordpress wordpress: depends_on: - db image: 'wordpress:latest' volumes: - './wordpress:/var/www/html' - './docker/wordpress/php/php.ini:/usr/local/etc/php/conf.d/php.ini:ro' ports: - '8000:80' restart: always environment: null WORDPRESS_VERSION: 5.1 WORDPRESS_LOCALE: en_US WORDPRESS_DB_HOST: 'db:3306' WORDPRESS_DB_USER: wordpress WORDPRESS_DB_PASSWORD: wordpress WORDPRESS_TABLE_PREFIX: wp_ WORDPRESS_DEBUG: 1 WORDPRESS_DB_NAME: wordpress working_dir: /var/www/html wordpress-cli: depends_on: - db - wordpress image: 'wordpress:cli' entrypoint: wp user: xfs command: "/bin/sh -c ' sleep 10; wp core install --url=\"http://localhost:8000\" --title=\"Sample Title\" --admin_name=admin --admin_password=admin --admin_email=you@domain.com '\n" volumes: - './wordpress:/var/www/html' - './docker/wordpress/php/php.ini:/usr/local/etc/php/conf.d/php.ini:ro' volumes: db_data: {} wordpress: null元素具有：

.navbar

因此，只需将其设置为0，然后将相同的值应用于大多数元素局部元素即可；为了便于说明，我使用了.navbar { ... padding: .5rem 1rem; }，但是您可以使用.dropdown，等等：

.navbar-nav > li

这将提供所需的结果。

请参阅以下小提琴：https://jsfiddle.net/tpv79kyr/

Answer 3

先创建一个带有.navbar类的标准导航栏，然后创建一个响应式折叠类： .navbar-expand-xl | lg | md | sm （将导航栏垂直堆叠在特大号上，大，中或小屏幕）。

您需要使用引导程序utility/spacing才能获得所需的结果。另外，请注意在 li 中使用 nav-link 类。

这是一种非常干净的方法，无需覆盖引导程序的默认CSS。

.orange-bg {
  background-color: orange;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<nav class="navbar p-0 fixed-top navbar-expand-sm navbar-light bg-light navbar-default" role="navigation">
  <div id="navbar-collapse-1" class="collapse navbar-collapse">
    <ul class="nav navbar-nav">
      <li class="nav-item dropdown orange-bg">
        <a class="nav-link" href="#">Foo</a>
      </li>
    </ul>
  </div>
</nav>

.navbar内<li>上的纯色背景

3 个答案: