html - Bootstrap 4 模板，试图在同一行获取图像

Question

我正在使用 Bootstrap 模板(经过大量编辑)。我有两张图片，每张都设置为全宽的 50%，它们拒绝在同一行排列。我正在使用 calc(50%)。不知道他们为什么不工作。我希望图标和 codefu 图像能够对齐，以及搜索和可添加的 div。未完成的站点在http://laurahd.com/new2/。我也附上了代码。了解他们为什么不工作的任何见解都将非常有帮助。

/* HackerOne/Callout 1 */

.callout1 {
  display: table;
  width: 100%;
  height: 420px;
  color: #fff;
  background: url(../img/hacker-home-res2.png) no-repeat center center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
}


/* Icons/Callout 2 */

.callout2 {
  display: table;
  width: calc(50%);
  height: 390px;
  color: #fff;
  float: left;
  background: url(../img/icons-new.png) no-repeat center center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
}


/* CodeFu/Callout 3 */

.callout3 {
  display: table;
  width: calc(50%);
  height: 390px;
  float: right;
  color: #fff;
  background: url(../img/codefu-new-header.png) no-repeat center center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
}


/* Flourgirl/Callout 6 */

.callout6 {
  display: table;
  width: 100%;
  height: 420px;
  color: #fff;
  background: url(../img/flourgirl-logo2.png) no-repeat center center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
}


/* Seek/Callout 4 */

.smaller {
  width: 102.7%;
}

.callout4 {
  display: table;
  width: calc(50%);
  height: 390px;
  color: #fff;
  float: left;
  background: url(../img/seek-logo.png) no-repeat center center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
}


/* Addaptive/Callout 5 */

.callout5 {
  display: table;
  width: calc(50%);
  height: 390px;
  float: right;
  color: #fff;
  background: url(../img/addaptive-logo-res.png) no-repeat center center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
}

.service-icon {
  background-color: #fff;
  color: #1d809f;
  height: 7rem;
  width: 7rem;
  display: block;
  line-height: 7.5rem;
  font-size: 2.25rem;
  box-shadow: 0 3px 3px 0 rgba(0, 0, 0, .1)
}

.callout {
  padding: 15rem 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, .1) 0, rgba(255, 255, 255, .1) 100%), url(../img/bg-callout.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover
}

.callout h2 {
  font-size: 3.5rem;
  font-weight: 700;
  display: block;
  max-width: 30rem
}

.portfolio-item {
  display: block;
  position: relative;
  overflow: hidden;
  max-width: 530px;
  margin: auto auto 1rem
}

.portfolio-item .caption {
  display: flex;
  height: 100%;
  width: 100%;
  background-color: rgba(33, 37, 41, .2);
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1
}

.portfolio-item .caption .caption-content {
  color: #fff;
  margin: auto 2rem 2rem
}

.portfolio-item .caption .caption-content h2 {
  font-size: .8rem;
  text-transform: uppercase
}

.portfolio-item .caption .caption-content p {
  font-weight: 300;
  font-size: 1.2rem
}

@media (min-width:992px) {
  .portfolio-item {
    max-width: none;
    margin: 0;
  }
  .portfolio-item .caption {
    -webkit-transition: -webkit-clip-path .25s ease-out, background-color .7s;
    -webkit-clip-path: inset(0);
    clip-path: inset(0)
  }
  .portfolio-item .caption .caption-content {
    transition: opacity .25s;
    margin-left: 5rem;
    margin-right: 5rem;
    margin-bottom: 5rem
  }
  .portfolio-item img {
    -webkit-transition: -webkit-clip-path .25s ease-out;
    -webkit-clip-path: inset(-1px);
    clip-path: inset(-1px)
  }
  .portfolio-item:hover img {
    -webkit-clip-path: inset(2rem);
    clip-path: inset(2rem)
  }
  .portfolio-item:hover .caption {
    background-color: rgba(29, 128, 159, .9);
    -webkit-clip-path: inset(2rem);
    clip-path: inset(2rem)
  }
}

<div class="homelink portfolio-item">
  <a href="http://laurahd.com/hackerone/">
    <aside class="callout1">
    </aside>
  </a>
</div>

<!-- Icons -->
<div class="homelink portfolio-item">
  <a href="http://laurahd.com/icons/">
    <aside class="callout2">
    </aside>
  </a>
</div>

<!-- CodeFu -->
<div class="homelink portfolio-item">
  <a href="http://laurahd.com/codefu/">
    <aside class="callout3">
    </aside>
  </a>
</div>

<!-- FlourGirl -->
<div class="homelink portfolio-item">
  <a href="http://laurahd.com/flourgirl/">
    <aside class="callout6">
    </aside>
  </a>
</div>

<!-- Seek -->
<div class="homelink portfolio-item">
  <a href="http://laurahd.com/seek2/">
    <aside class="callout4">
    </aside>
  </a>
</div>

<!-- Addaptive -->
<div class="homelink portfolio-item">
  <a href="http://laurahd.com/addaptive/">
    <aside class="callout5">
    </aside>
  </a>
</div>

Answer 1

用 bootstrap 响应标签包裹你的图标和 codefu 图像父 div

<div class="container-fluid">
    <div class="row">
        <div class="col"> 
            <!-- Icons -->
            <div class="homelink portfolio-item"> 
                <a href="http://laurahd.com/icons/">
                    <aside class="callout2"> </aside>
                </a> 
            </div>
        </div>
        <div class="col"> 
            <!-- CodeFu -->
            <div class="homelink portfolio-item"> 
                <a href="http://laurahd.com/codefu/">
                    <aside class="callout3"> </aside>
                </a> 
            </div>
        </div>
    </div>
</div>