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

问题描述 投票：1回答：3

我正在使用Bootstrap模板（经过大量编辑）。我有两个图像，每个图像设置为全宽的50％，拒绝在同一行上排队。我正在使用calc（50％）。不知道为什么他们不工作。我想图标和codefu图像排队，以及搜索和addaptive divs。未完成的网站是在http://laurahd.com/new2/和Ive附加代码。任何洞察他们为什么不工作将是非常有帮助的。

/* 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>
html css formatting
3个回答
0
投票

尝试使用container-fluid与row和col来自bootstrap。

用这个替换“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-File中。

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>
0
投票

您应该创建宽度为50％的容器，在您的情况下，使用类“homelink portfolio-item”创建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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.