Question

我的品牌左边有空间，我不知道如何摆脱它。将导航栏品牌填充设置为0px只会占用一半的空间。我也无法弄清楚如何获得正确的链接以品牌为中心。有建议吗？

.navbar {
  background-color: cyan;
  margin-top: 20px;
}

.navbar-brand {
  float:none !important;
  padding: 0px;
}

<!DOCTYPE html>
<html> 
    <head>
        <title>Example</title>

        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- CSS -->
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
        <!-- <link href="styles/styles.css" rel="stylesheet"> -->

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    </head>

<div class="container">
  <nav class="navbar navbar-default">
    <div class="col-lg-12 navigation">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapsed" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
       </button>
      <a class="navbar-brand" href="#">
        <span><img src="https://placehold.it/100x100" width="80" height="80" alt=""></span>Logo
      </a>

      <div class="navbar-collapse pull-right collapse" id="navbar-collapsed">
        <ul class="nav navbar-nav">
          <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 2</a></li>
          <li><a href="#">Link 3</a></li>
          <li><a href="#">Link 4</a></li>
        </ul>
      </div>
    </div>
  </nav>
</div>

<div class="container-fluid">
  Rest of page content
</div>

    </body>
</html>

Answer 1

将.container的边距设置为零。

.navbar {
  background-color: cyan;
  margin-top: 20px;
}

.navbar-brand {
  float: none !important;
  padding: 0px;
}

.container {
  margin: 0!important;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <nav class="navbar navbar-default">
    <div class="col-lg-12 navigation">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapsed" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
       </button>
      <a class="navbar-brand" href="#">
        <span><img src="https://via.placeholder.com/80x80" width="80" height="80" alt=""></span>Logo
      </a>

      <div class="navbar-collapse pull-right collapse" id="navbar-collapsed">
        <ul class="nav navbar-nav">
          <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 2</a></li>
          <li><a href="#">Link 3</a></li>
          <li><a href="#">Link 4</a></li>
        </ul>
      </div>
    </div>
  </nav>
</div>

<div class="container-fluid">
  Rest of page content
</div>

Answer 2

您应该使用这个简单的技巧。

button.navbar-toggle.collapsed {
    height: 0;
    width: 0;
    padding: 0;
    border-width: 0;
    font-size: 0;
    float: left;
}
.col-lg-12.navigation {
    padding: 0;
}
.navbar-default .navbar-brand{
    padding: 0;
}

希望获得帮助。

让我知道进一步的澄清。

.navbar {
background-color: cyan;
margin-top: 20px;
}

.navbar-brand {
float:none !important;
padding: 0px;
}

button.navbar-toggle.collapsed{
height: 0;
width: 0;
padding: 0;
border-width: 0;
font-size: 0;
float: left;
}
.col-lg-12.navigation {
padding: 0;
}
.navbar-default .navbar-brand{padding: 0;}

<!DOCTYPE html>
<html> 
    <head>
        <title>Example</title>

        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
        <link href="styles/styles.css" rel="stylesheet">

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    </head>

<div class="container">
  <nav class="navbar navbar-default">
    <div class="col-lg-12 navigation">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapsed" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
       </button>
      <a class="navbar-brand" href="#">
        <span><img src="https://placehold.it/100x100" width="80" height="80" alt=""></span>Logo
      </a>

      <div class="navbar-collapse pull-right collapse" id="navbar-collapsed">
        <ul class="nav navbar-nav">
          <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 2</a></li>
          <li><a href="#">Link 3</a></li>

Answer 3

这来自bootstrap.css-它很容易解决：

div.col-lg-12.navigation {padding-left: 0;}
a.navbar-brand {padding: 0;}

Navbar品牌问题

3 个答案: