个人中心
gpt4 book ai didi

css - 为什么导航栏和屏幕右边缘之间留有空间？

转载 作者：太空宇宙 更新时间：2023-11-04 07:54:06 27 4
gpt4 key购买 nike

我从事网络开发工作。在使用 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>

最佳答案

切换按钮 .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>

关于css - 为什么导航栏和屏幕右边缘之间留有空间？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47503748/

27 4 0
文章推荐： html - 如何制作两列 SVG 和文本，文本始终位于 SVG 的右侧？
文章推荐： java - Appengine Channel Api 存在 _ah/channel/connected 不工作
文章推荐： 带有语句 : 'Syntax error: invalid syntax' 的 Python
文章推荐： java - 在 MVC 中映射操作时要实现的最佳设计模式