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

Question

我正在使用 Bootstrap 模板（经过大量编辑）。我有两张图片，每张都设置为全宽的 50%，它们拒绝在同一行排列。我正在使用计算（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

用引导响应标签包裹你的图标和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>

Answer 2

尝试在引导程序中将container-fluid 与row 和col 一起使用。

用这个替换“Icons”和“CodeFu”中的两个div。

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

我已经编写了内联 CSS。您可以提取它并将其放在您的 css 文件中。

Answer 3

您应该制作宽度为 50% 的容器，在您的情况下是具有“homelink 组合项目”类的 div。但在这种情况下，您仍然会遇到其他想要 100% 的行的问题。

如果你把两个元素都放在 div 里面就可以了。

像这样：

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

            </aside>
        </a>
        <a href="http://laurahd.com/codefu/">
            <aside class="callout3">

            </aside>
        </a>
</div>