为什么在将图像添加到文件时文件会添加空格？

时间：2018-01-22 17:20:12

标签： html css bootstrap-4

我一直在使用Bootstrap 4的网站上工作，其中.row div中有三个图像。然而，我遇到的问题是我希望所有图像具有相同的高度，所以我创建了自己的类，我设置了height: 20%和width: auto图像看起来我想要它们然而，对于每个图像，在该div下添加一定量的像素，并且它在具有图像的部分和其后的部分之间设置了巨大的间隙。我想知道什么是避免这种情况发生的方法，因为我不想在两个部分之间保持这种差距。这是我正在谈论的https://jsfiddle.net/wxg51v5x/的一个小提琴（注释图像以查看行动的差异）。谢谢！

编辑：包含代码本身。

HTML ：

<!DOCTYPE html>
<html>
  <head>
    <title>Illicit Mind Inc. - Programs</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0, shrink-to-fit=no" />
    <link rel="stylesheet" href="./css/bootstrap.min.css" />
    <link rel="stylesheet" href="./css/font-awesome.min.css" />
    <link rel="stylesheet" href="./css/styles.css" />
  </head>
  <body>

<!-- Navbar -->
<nav class="navbar navbar-expand-md fixed-top">
  <a class="navbar-brand" href="./index.html"><img src="./imgs/logo.png" alt="Illicit Mind Inc."/></a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar">
    <span class="navbar-toggler-icon"><i class="fas fa-bars"></i></span>
  </button>

  <div class="collapse navbar-collapse" id="navbar">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="./programs.html">Programs</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="./about-us.html">About Us</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="./contact-us.html">Contact Us</a>
      </li>
    </ul>
    <div>
      <ul class="navbar-nav mr-auto">
        <li class="nav-item">
          <a class="nav-link" href="./login.html">Login/Signup</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
<!-- Navbar -->

<!-- Background Image  -->
<div class="full-height bg-image"></div>
<!-- Background Image -->

<!-- BWNF -->
<div class="absolute-top" id="bwnf">
  <div class="d-flex align-items-center justify-content-center full-height full-width">
    <div class="text-center">
      <h1 class="text-white font-heavy text-center display-1">Build With, Not For</h1>
      <hr class="bg-white main-hr" />
    </div>
  </div>
</div>
<!-- BWNF -->

<!-- Programs -->
<div class="container-fluid" id="programs">
  <div class="d-flex align-items-center justify-content-center">
    <div class="text-center">
      <div class="logo-buffer"></div>
      <div class="logo-buffer"></div>
      <h3 class="font-heavy">Our Great Programs</h3>
      <br />
      <div class="row">
        <div class="col-md-4">
          <img class="program-logo" src="./imgs/cite-logo.png" alt="Caribbeans In Tech + Entrepreneurship" />
          <br /> <br />
          <h4>CITE</h4>
          <p>A professional collective of Caribbeans in the innovation ecosystem.</p>
          <button class="btn">Learn More</button>
        </div>
        <div class="col-md-4">
          <img class="program-logo" src="./imgs/bwnf-logo.png" alt="Build With, Not For" />
          <br /> <br />
          <h4>Build With, Not For</h4>
          <p>A series of hackathons where we encourage community members, hackers, business people and students to come together and create solutions to problems in their communities.</p>
          <button class="btn">Register</button>
        </div>
        <div class="col-md-4">
          <img class="program-logo" src="./imgs/gsd-logo.png" alt="Get Shit Done" />
          <br /> <br />
          <h4>Get Shit Done</h4>
          <p>An annual summit, Classes and workshops that teaches innovation in a non-traditional educational method and setting.</p>
          <button class="btn">Attend</button>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- Programs -->

<!-- Formula -->
<div class="container-fluid" id="formula">
  <div class="d-flex align-items-center justify-content-center">
    <div class="text-center">
      <h3 class="font-heavy">Tribe Secret Formula</h3>
      <h6>In all of our programming, we provide the three fundamental things that it takes to create a successful innovator.</h6>
      <br />
      <div class="row">
        <div class="col-md-4">
          <h1 class="lead"><span class="fas fa-flask fa-4x"></span></h1>
          <p>Experiences</p>
          <p>Our exciting events are packed with creativity, content and connection! At our highly collaborative events you get the chance discover your internal uniqueness.</p>
        </div>
        <div class="col-md-4">
          <h1 class="lead"><span class="fas fa-users fa-4x"></span></h1>
          <p>Connections</p>
          <p>You are the average of the five people you spend the most time with" - Jim Rohn. Connect with peers that will help you positively progress into your future.</p>
        </div>
        <div class="col-md-4">
          <h1 class="lead"><span class="far fa-lightbulb fa-4x"></span></h1>
          <p>Knowledge</p>
          <p>Our open, direct and community style approach to education allows individuals to gain invaluable hands-on knowledge that will accelerate their success.</p>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- Formula -->

<!-- Footer -->
<footer class="full-width text-center">
  <div>
    <p>
      &copy; <span id="year"></span> Illicit Mind Inc. All Rights Reserved.<br />
      <a href="https://www.facebook.com/illicitmindinc" class="fab fa-facebook-f" target="_blank"></a> <span>&nbsp;</span>
      <a href="https://twitter.com/illicitmindinc" class="fab fa-twitter" target="_blank"></a> <span>&nbsp;</span>
      <a href="https://www.instagram.com/illicitmindinc/" class="fab fa-instagram" target="_blank"></a>
    </p>
  </div>
</footer>
<!-- Footer -->

<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery-ui.min.js"></script>
<script type="text/javascript" src="./js/bootstrap.min.js"></script>
<script type="text/javascript" src="./js/scripts.js"></script>
  </body>
</html>

CSS：

@font-face {
  font-family: 'Futura Book';
  src: url('./fonts/futura-book-webfont.woff2') format('woff2'),
       url('./fonts/futura-book-webfont.woff') format('woff');
  font-style: normal;
}
@font-face {
  font-family: 'Futura Heavy';
  src: url('./fonts/futura-heavy-webfont.woff2') format('woff2'),
       url('./fonts/futura-heavy-webfont.woff') format('woff');
  font-style: bold;
}
* {font-family: 'Futura Book', Arial, sans-serif}
.absolute-top {
  top: 0;
  position: absolute;
}
.absolute-bottom {
  bottom: 0;
  position: absolute;
}
.logo {
  width: auto;
  height: 15vh;
}
.navbar-brand > img {
  width: auto;
  height: 55px;
}
.program-logo {
  width: auto;
  height: 20%;
}
nav {
  background-color: white;
  box-shadow: 0px 1px 10px 0px #4191B4;
}
.bg-image {
  background: url('../imgs/bwnf-3.jpg') no-repeat center center fixed;
  background-size: cover;
}
footer {
  padding-top: 10px;
  line-height: 1.25;
}
.login-divider  hr {
  width: 42.5vw;
  margin-left: auto;
  margin-right: auto;
  border: .25px solid rgba(134, 142, 150, .25);
}
.main-hr {width: 0}
.interests {padding-left: 25px}
.profile-picture {height: 25vh}
.font-book {font-family: 'Futura Book', Arial, sans-serif}
.font-heavy {font-family: 'Futura Heavy', Arial, sans-serif}
body {overflow-x: hidden}
.padding-top {padding-top: 95px}
.left-hr {float: left}
.right-hr {float: right}
.logo-buffer {height: 10px}
a:hover {text-decoration: none}
input {text-align: center}
.fa-bars, a {color: rgba(65, 145, 180, .95)}
.fa-bars:hover, a:hover {color: rgba(65, 145, 180, 1)}
.bg-google {background-color: #EA4335}
.bg-fb {background-color: #3B5998}
.full-width {width: 100vw}
.full-height {height: 100vh}
.card-header {cursor: pointer}
/* #programs {background-image: linear-gradient(to top, #4191B4 5%, white 100%)}
#formula {background-image: linear-gradient(to top, white 0%, #4191B4 95%)} */

2 个答案:

答案 0 :(得分：0)

问题来自您的program-logo课程和大图片。

我为图像使用了img-fluid类，为第三张图像使用了px-5类，并使用container类而不是{container-fluid类重新排列了一些内容。 {1}}并将图像嵌套到它们自己的行列对中，以便更容易使用Bootstrap 4本机类进行操作（无需任何自定义css）。

另请注意：我添加了背景颜色类（bg-warning和bg-secondary）只是为了看看发生了什么，并在我的选项中注释了一些你不需要的东西。随意根据需要进行调整。

我只处理了上部和下面的间距，因为这是你的问题。但您可能希望对底部进行一些调整，因为container-fluid在宽阔的4K屏幕上看起来并不好看。

以下是代码：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container bg-warning" id="programs">
<!--        <div class="d-flex align-items-center justify-content-center">-->
        <div class="text-center">
<!--
            <div class="logo-buffer"></div>
            <div class="logo-buffer"></div>
-->
            <h3 class="font-heavy mt-3">Our Great Programs</h3>
            <br />
            <div class="row">
                <div class="col-md-4 pb-3">
                    <div class="row">
                        <div class="col-8 col-md-10 col-xl-8 offset-2 offset-md-1 offset-xl-2 pb-3">
                            <img class="img-fluid" src="https://illicitmind.com/static/img/2%20CITE_CITE%20Logo%20C.png" alt="Caribbeans In Tech + Entrepreneurship" />
                        </div>
                    </div>
                    <h4>CITE</h4>
                    <p>A professional collective of Caribbeans in the innovation ecosystem.</p>
                    <button class="btn">Learn More</button>
                </div>
                <div class="col-md-4 pb-3">
                    <div class="row">
                        <div class="col-8 col-md-10 offset-2 offset-md-1 pb-3">
                            <img class="img-fluid" src="https://illicitmind.com/static/img/bwn4.png" alt="Build With, Not For" />
                        </div>
                    </div>
                    <h4>Build With, Not For</h4>
                    <p>A series of hackathons where we encourage community members, hackers, business people and students to come together and create solutions to problems in their communities.</p>
                    <button class="btn">Register</button>
                </div>
                <div class="col-md-4 pb-3">
                    <div class="row">
                        <div class="col-8 col-md-10 col-xl-8 offset-2 offset-md-1 offset-xl-2 pb-3">
                            <img class="img-fluid px-5" src="https://illicitmind.com/static/img/Gsd-Logo.png" alt="Get Shit Done" />
                        </div>
                    </div>
                    <h4>Get Shit Done</h4>
                    <p>An annual summit, Classes and workshops that teaches innovation in a non-traditional educational method and setting.</p>
                    <button class="btn">Attend</button>
                </div>
            </div>
        </div>
<!--        </div>-->
</div>

<div class="container-fluid bg-secondary" id="formula">
<!--        <div class="d-flex align-items-center justify-content-center">-->
        <div class="text-center">
            <h3 class="font-heavy">Tribe Secret Formula</h3>
            <h6>In all of our programming, we provide the three fundamental things that it takes to create a successful innovator.</h6>
            <br />
            <div class="row">
                <div class="col-md-4">
                    <h1 class="lead"><span class="fas fa-flask fa-4x"></span></h1>
                    <p>Experiences</p>
                    <p>Our exciting events are packed with creativity, content and connection! At our highly collaborative events you get the chance discover your internal uniqueness.</p>
                </div>
                <div class="col-md-4">
                    <h1 class="lead"><span class="fas fa-users fa-4x"></span></h1>
                    <p>Connections</p>
                    <p>You are the average of the five people you spend the most time with" - Jim Rohn. Connect with peers that will help you positively progress into your future.</p>
                </div>
                <div class="col-md-4">
                    <h1 class="lead"><span class="fas fa-lightbulb fa-4x"></span></h1>
                    <p>Knowledge</p>
                    <p>Our open, direct and community style approach to education allows individuals to gain invaluable hands-on knowledge that will accelerate their success.</p>
                </div>
            </div>
        </div>
<!--        </div>-->
</div>

答案 1 :(得分：0)

你正在谈论的空间即将到来，因为你使用.program-logo width:auto;我改变了属性，空间消失了我在下面的代码中做了你应该尝试的。 

<!DOCTYPE html>
<html>
  <head>
    <title>Illicit Mind Inc. - Programs</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0, shrink-to-fit=no" />
    <link rel="stylesheet" href="./css/bootstrap.min.css" />
    <link rel="stylesheet" href="./css/font-awesome.min.css" />
    <link rel="stylesheet" href="./css/styles.css" />
  </head>
  <body>

<!-- Navbar -->
<nav class="navbar navbar-expand-md fixed-top">
  <a class="navbar-brand" href="./index.html"><img src="./imgs/logo.png" alt="Illicit Mind Inc."/></a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar">
    <span class="navbar-toggler-icon"><i class="fas fa-bars"></i></span>
  </button>

  <div class="collapse navbar-collapse" id="navbar">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="./programs.html">Programs</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="./about-us.html">About Us</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="./contact-us.html">Contact Us</a>
      </li>
    </ul>
    <div>
      <ul class="navbar-nav mr-auto">
        <li class="nav-item">
          <a class="nav-link" href="./login.html">Login/Signup</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
<!-- Navbar -->

<!-- Background Image  -->
<div class="full-height bg-image"></div>
<!-- Background Image -->

<!-- BWNF -->
<div class="absolute-top" id="bwnf">
  <div class="d-flex align-items-center justify-content-center full-height full-width">
    <div class="text-center">
      <h1 class="text-white font-heavy text-center display-1">Build With, Not For</h1>
      <hr class="bg-white main-hr" />
    </div>
  </div>
</div>
<!-- BWNF -->

<!-- Programs -->
<div class="container-fluid" id="programs">
  <div class="d-flex align-items-center justify-content-center">
    <div class="text-center">
      <div class="logo-buffer"></div>
      <div class="logo-buffer"></div>
      <h3 class="font-heavy">Our Great Programs</h3>
      <br />
      <div class="row">
        <div class="col-md-4 col-sm-12">
          <img class="program-logo" src="./imgs/cite-logo.png" alt="Caribbeans In Tech + Entrepreneurship" />
          <br /> <br />
          <h4>CITE</h4>
          <p>A professional collective of Caribbeans in the innovation ecosystem.</p>
          <button class="btn">Learn More</button>
        </div>
        <div class="col-md-4 col-sm-12">
          <img class="program-logo" src="./imgs/bwnf-logo.png" alt="Build With, Not For" />
          <br /> <br />
          <h4>Build With, Not For</h4>
          <p>A series of hackathons where we encourage community members, hackers, business people and students to come together and create solutions to problems in their communities.</p>
          <button class="btn">Register</button>
        </div>
        <div class="col-md-4 col-sm-12">
          <img height="20%" width="auto" src="./imgs/gsd-logo.png" alt="Get Shit Done" />
          <br /> <br />
          <h4>Get Shit Done</h4>
          <p>An annual summit, Classes and workshops that teaches innovation in a non-traditional educational method and setting.</p>
          <button class="btn">Attend</button>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- Programs -->

<!-- Formula -->
<div class="container-fluid" id="formula">
  <div class="d-flex align-items-center justify-content-center">
    <div class="text-center">
      <h3 class="font-heavy">Tribe Secret Formula</h3>
      <h6>In all of our programming, we provide the three fundamental things that it takes to create a successful innovator.</h6>
      <br />
      <div class="row">
        <div class="col-md-4">
          <h1 class="lead"><span class="fas fa-flask fa-4x"></span></h1>
          <p>Experiences</p>
          <p>Our exciting events are packed with creativity, content and connection! At our highly collaborative events you get the chance discover your internal uniqueness.</p>
        </div>
        <div class="col-md-4">
          <h1 class="lead"><span class="fas fa-users fa-4x"></span></h1>
          <p>Connections</p>
          <p>You are the average of the five people you spend the most time with" - Jim Rohn. Connect with peers that will help you positively progress into your future.</p>
        </div>
        <div class="col-md-4">
          <h1 class="lead"><span class="far fa-lightbulb fa-4x"></span></h1>
          <p>Knowledge</p>
          <p>Our open, direct and community style approach to education allows individuals to gain invaluable hands-on knowledge that will accelerate their success.</p>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- Formula -->

<!-- Footer -->
<footer class="full-width text-center">
  <div>
    <p>
      &copy; <span id="year"></span> Illicit Mind Inc. All Rights Reserved.<br />
      <a href="https://www.facebook.com/illicitmindinc" class="fab fa-facebook-f" target="_blank"></a> <span>&nbsp;</span>
      <a href="https://twitter.com/illicitmindinc" class="fab fa-twitter" target="_blank"></a> <span>&nbsp;</span>
      <a href="https://www.instagram.com/illicitmindinc/" class="fab fa-instagram" target="_blank"></a>
    </p>
  </div>
</footer>
<!-- Footer -->

<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery-ui.min.js"></script>
<script type="text/javascript" src="./js/bootstrap.min.js"></script>
<script type="text/javascript" src="./js/scripts.js"></script>
  </body>
</html>

CSS：

@font-face {
  font-family: 'Futura Book';
  src: url('./fonts/futura-book-webfont.woff2') format('woff2'),
       url('./fonts/futura-book-webfont.woff') format('woff');
  font-style: normal;
}
@font-face {
  font-family: 'Futura Heavy';
  src: url('./fonts/futura-heavy-webfont.woff2') format('woff2'),
       url('./fonts/futura-heavy-webfont.woff') format('woff');
  font-style: bold;
}
* {font-family: 'Futura Book', Arial, sans-serif}
.absolute-top {
  top: 0;
  position: absolute;
}
.absolute-bottom {
  bottom: 0;
  position: absolute;
}
.logo {
  width: auto;
  height: 15vh;
}
.navbar-brand > img {
  width: auto;
  height: 55px;
}
.program-logo {
  width: 40%;
  height: 20%;
}
nav {
  background-color: white;
  box-shadow: 0px 1px 10px 0px #4191B4;
}
.bg-image {
  background: url('../imgs/bwnf-3.jpg') no-repeat center center fixed;
  background-size: cover;
}
footer {
  padding-top: 10px;
  line-height: 1.25;
}
.login-divider  hr {
  width: 42.5vw;
  margin-left: auto;
  margin-right: auto;
  border: .25px solid rgba(134, 142, 150, .25);
}
.main-hr {width: 0}
.interests {padding-left: 25px}
.profile-picture {height: 25vh}
.font-book {font-family: 'Futura Book', Arial, sans-serif}
.font-heavy {font-family: 'Futura Heavy', Arial, sans-serif}
body {overflow-x: hidden}
.padding-top {padding-top: 95px}
.left-hr {float: left}
.right-hr {float: right}
.logo-buffer {height: 10px}
a:hover {text-decoration: none}
input {text-align: center}
.fa-bars, a {color: rgba(65, 145, 180, .95)}
.fa-bars:hover, a:hover {color: rgba(65, 145, 180, 1)}
.bg-google {background-color: #EA4335}
.bg-fb {background-color: #3B5998}
.full-width {width: 100vw}
.full-height {height: 100vh}
.card-header {cursor: pointer}
/* #programs {background-image: linear-gradient(to top, #4191B4 5%, white 100%)}
#formula {background-image: linear-gradient(to top, white 0%, #4191B4 95%)} */
相关问题
最新问题