0

我熟悉引导程序，它是响应式堆叠，但在这种情况下，我似乎可以在任何屏幕尺寸下进行堆叠。页面上的其他两列行没有这样做，所以我想知道是否有人可以看看我疲惫的眼睛缺少什么。

JS小提琴

我的 HTML：

<div class="row">
    <div class="col-md-12">

      <div class="col-md-6 pull-left" style="margin-bottom:40px;">
      <img src="http://placehold.it/1100x1591" style="max-width:400px;" alt=""/>
      </div>

            <div class="col-md-6 pull-right" style="font-weight:bold; margin-left:20px; margin-bottom:40px;">
            <div style="height: 2px; background-color: #9e1e22;">
  <span style="background-color: white; position: relative; top: -0.5em; color:#9e1e22; font-size:18px;">
    Cybersecurity&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  </span>
</div>
<div>
While information security and privacy are different, they are interdependent. For that reason, Navigate teams with select partner firms that specialize in cybersecurity to provide services such as highly technical security assessments, penetration testing, or application evaluations. These partnerships enable us to provide one integrated team for all your information protection, privacy and cybersecurity assessment needs.</div>
            </div>
    </div>
  </div>
4

2 回答 2

2

问题是您margin-line在您div的位置设置了 a ，因此元素变得大于 50% 并堆叠。你可以解决使用

  <div class="col-md-6 pull-right" style="font-weight: bold; padding-left: 20px; margin-bottom: 40px;">

你可以看到小提琴。

我还添加了一个div class="row"andimg-responsive在你的image，但不是必需的。

https://jsfiddle.net/2oyt71gL/3/

于 2015-08-14T15:40:52.303 回答
1

我刚刚运行了您的代码，并且能够通过将您的第二个 div class="col-md-6" 更改为 col-md-5 来修复它，并且在您开始调整屏幕大小之前它不再堆叠。

<div class="row">
    <div class="col-md-12">
        <div class="col-md-6 pull-left" style="margin-bottom: 40px;">
            <img src="http://placehold.it/1100x1591" style="max-width: 400px;" alt="" />
        </div>
        <div class="col-md-5 pull-right" style="font-weight: bold; margin-left: 20px; margin-bottom: 40px;">
            <div style="height: 2px; background-color: #9e1e22;">
                <span style="background-color: white; position: relative; top: -0.5em; color: #9e1e22; font-size: 18px;">
                    Cybersecurity&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                </span>
            </div>
            <div>
                While information security and privacy are different, they are interdependent. For that reason, Navigate teams with select partner firms that specialize in cybersecurity to provide services such as highly technical security assessments, penetration testing, or application evaluations. These partnerships enable us to provide one integrated team for all your information protection, privacy and cybersecurity assessment needs.
            </div>
        </div>
    </div>
</div>
于 2015-08-14T15:31:06.827 回答