为什么导航栏和屏幕右边之间还留有空格？

时间：2017-11-27 03:57:06

标签： html css html5 twitter-bootstrap-3

我正致力于网络开发。 使用bootstrap框架编码时，我遇到了问题。 在响应式测试中，导航栏和屏幕右边缘之间留有一些空间。那个地方有一个滚动条。如果我想要滚动条后面的导航栏，该怎么办？ screen shot of that 谁能告诉我我的代码在哪里出错了。

body {
  position: relative;
  width: 100%;
}

.abhudaya {
  padding-top: 2.5%;
  padding-bottom: 1%;
  width: 100%;
  background-color: #222730;
}

.logo {
  width: 350px;
  height: auto;
  margin-left: 0%;
}

.contact-address-icon {
  width: 26px;
  height: auto;
  margin-left: 2%;
}

.contact-address-headding {
  margin-left: 3px;
  color: white;
}

.contact-email-address {
  margin-left: 30px;
  color: white;
}

.navigation1 {
  background-color: #242933;
  width: 100%;
}

.nav-tabs li a {
  color: #777;
}

.navbar {
  margin-bottom: 0;
  background-color: #242933;
  border: 0;
  font-size: 16px !important;
  letter-spacing: 4px;
  opacity: 0.9;
}

.navbar li a,
.navbar .navbar-brand {
  color: #d5d5d5 !important;
}

.navbar-nav li:hover a:hover {
  color: #fff !important;
  background-color: red;
}

.navbar-nav li.active a {
  color: #fff !important;
  background-color: red !important;
}

.open .dropdown-toggle {
  color: #fff;
  background-color: red !important;
}

.dropdown-menu li a {
  color: #000 !important;
}

.dropdown-menu li:hover a:hover {
  background-color: #F9F1F0 !important;
  color: red !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <title>index abhudaya</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body id="" data-spy="scroll" data-target=".navbar" data-offset="50">
  <div class="abhudaya container-fluid">
    <div class="row">
      <div class="col-md-4">
        <img src="images/logo.png" alt="logo" class="logo">
      </div>
      <div class="col-md-3">
        <p><img src="images/call.png" alt="call" class="contact-address-icon"><i class="fa fa-phone" aria-hidden="true" style="color: white;"></i><span class="contact-address-headding">lorem</span>
          <br><span class="contact-email-address">lorem</span></p>
      </div>
      <div class="col-md-3">
        <p><img src="images/location.png" alt="location" class="contact-address-icon"><span class="contact-address-headding">lorem</span><br><span class="contact-email-address">lorem</span></p>
      </div>
    </div>
  </div>
  <div class="navigation1 container-fluid">
    <nav class="navbar navbar-default container-fluid">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle navigation-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
          <ul class="nav navbar-nav navbar-left">
            <li><a href="#">HOME</a></li>
            <li><a href="#">BAND</a></li>
            <li><a href="#">TOUR</a></li>
            <li><a href="#">CONTACT</a></li>
            <li class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" href="#">MORE
          <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Merchandise</a></li>
                <li><a href="#">Extras</a></li>
                <li><a href="#">Media</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </div>
  <div class="text">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime vitae nostrum magni tempora repellendus tenetur asperiores mollitia dignissimos libero hic, doloribus, exercitationem consectetur quas incidunt fugit perferendis fuga! Sint, eaque. Lorem
      ipsum dolor sit amet, consectetur adipisicing elit. Maxime vitae nostrum magni tempora repellendus tenetur asperiores mollitia dignissimos libero hic, doloribus, exercitationem consectetur quas incidunt fugit perferendis fuga! Sint, eaque. Lorem
      ipsum dolor sit amet, consectetur adipisicing elit. Maxime vitae nostrum magni tempora repellendus tenetur asperiores mollitia dignissimos libero hic, doloribus, exercitationem consectetur quas incidunt fugit perferendis fuga! Sint, eaque. Lorem
      ipsum dolor sit amet, consectetur adipisicing elit. Maxime vitae nostrum magni tempora repellendus tenetur asperiores mollitia dignissimos libero hic, doloribus, exercitationem consectetur quas incidunt fugit perferendis fuga! Sint, eaque. Lorem
      ipsum dolor sit amet, consectetur adipisicing elit. Maxime vitae nostrum magni tempora repellendus tenetur asperiores mollitia dignissimos libero hic, doloribus, exercitationem consectetur quas incidunt fugit perferendis fuga! Sint, eaque.</p>
  </div>
</body>
</html>

1 个答案:

答案 0 :(得分：1)

切换按钮.navbar-toggle

有一个边距和填充

将此类添加到css中以删除填充和边距

.navbar-toggle
 {
   padding-right: 0px!important;
   margin-right: 0px!important; 
 }

完整代码

body {
  position: relative;
  width: 100%;
}

.abhudaya {
  padding-top: 2.5%;
  padding-bottom: 1%;
  width: 100%;
  background-color: #222730;
}

.logo {
  width: 350px;
  height: auto;
  margin-left: 0%;
}

.contact-address-icon {
  width: 26px;
  height: auto;
  margin-left: 2%;
}

.contact-address-headding {
  margin-left: 3px;
  color: white;
}

.contact-email-address {
  margin-left: 30px;
  color: white;
}

.navigation1 {
  background-color: #242933;
  width: 100%;
}

.nav-tabs li a {
  color: #777;
}

.navbar {
  margin-bottom: 0;
  background-color: #242933;
  border: 0;
  font-size: 16px !important;
  letter-spacing: 4px;
  opacity: 0.9;
}

.navbar li a,
.navbar .navbar-brand {
  color: #d5d5d5 !important;
}

.navbar-nav li:hover a:hover {
  color: #fff !important;
  background-color: red;
}

.navbar-nav li.active a {
  color: #fff !important;
  background-color: red !important;
}

.open .dropdown-toggle {
  color: #fff;
  background-color: red !important;
}

.dropdown-menu li a {
  color: #000 !important;
}

.dropdown-menu li:hover a:hover {
  background-color: #F9F1F0 !important;
  color: red !important;
}
.navbar-toggle
 {
   padding-right: 0px!important;
   margin-right: 0px!important; 
 }
<!DOCTYPE html>
<html lang="en">
<head>
  <title>index abhudaya</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body id="" data-spy="scroll" data-target=".navbar" data-offset="50">
  <div class="abhudaya container-fluid">
    <div class="row">
      <div class="col-md-4">
        <img src="images/logo.png" alt="logo" class="logo">
      </div>
      <div class="col-md-3">
        <p><img src="images/call.png" alt="call" class="contact-address-icon"><i class="fa fa-phone" aria-hidden="true" style="color: white;"></i><span class="contact-address-headding">lorem</span>
          <br><span class="contact-email-address">lorem</span></p>
      </div>
      <div class="col-md-3">
        <p><img src="images/location.png" alt="location" class="contact-address-icon"><span class="contact-address-headding">lorem</span><br><span class="contact-email-address">lorem</span></p>
      </div>
    </div>
  </div>
  <div class="navigation1 container-fluid">
    <nav class="navbar navbar-default container-fluid">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle navigation-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
          <ul class="nav navbar-nav navbar-left">
            <li><a href="#">HOME</a></li>
            <li><a href="#">BAND</a></li>
            <li><a href="#">TOUR</a></li>
            <li><a href="#">CONTACT</a></li>
            <li class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" href="#">MORE
          <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Merchandise</a></li>
                <li><a href="#">Extras</a></li>
                <li><a href="#">Media</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </div>
  <div class="text">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime vitae nostrum magni tempora repellendus tenetur asperiores mollitia dignissimos libero hic, doloribus, exercitationem consectetur quas incidunt fugit perferendis fuga! Sint, eaque. Lorem
      ipsum dolor sit amet, consectetur adipisicing elit. Maxime vitae nostrum magni tempora repellendus tenetur asperiores mollitia dignissimos libero hic, doloribus, exercitationem consectetur quas incidunt fugit perferendis fuga! Sint, eaque. Lorem
      ipsum dolor sit amet, consectetur adipisicing elit. Maxime vitae nostrum magni tempora repellendus tenetur asperiores mollitia dignissimos libero hic, doloribus, exercitationem consectetur quas incidunt fugit perferendis fuga! Sint, eaque. Lorem
      ipsum dolor sit amet, consectetur adipisicing elit. Maxime vitae nostrum magni tempora repellendus tenetur asperiores mollitia dignissimos libero hic, doloribus, exercitationem consectetur quas incidunt fugit perferendis fuga! Sint, eaque. Lorem
      ipsum dolor sit amet, consectetur adipisicing elit. Maxime vitae nostrum magni tempora repellendus tenetur asperiores mollitia dignissimos libero hic, doloribus, exercitationem consectetur quas incidunt fugit perferendis fuga! Sint, eaque.</p>
  </div>
</body>
</html>

相关问题
最新问题