Question

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

<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>

{{1}}

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。

将＆＃34;图标＆＃34;中的两个div替换掉。和＃34; CodeFu＆＃34;用这个。

<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中。

Answer 3

你应该制作宽度为50％的容器，在你的情况下是一个带有类＆＃34; homelink portfolio-item＆＃34;的div。但在这种情况下，您仍然会遇到其他想要100％的行的问题。

如果将两个元素放在div中，它将起作用。

像这样：

if

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

3 个答案: