Bootstrap 引导3列未在桌面上水平显示

2vuwiymt 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(2)|浏览(145)

我对bootstrap很熟悉，它是响应式堆栈，但在这种情况下，我似乎在任何屏幕大小都能得到堆栈。页面上的其他两列行没有这样做，所以我想知道是否有人可以看一看，看看我疲惫的眼睛错过了什么。
JS Fiddle
我的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>

twitter-bootstrap

来源：https://stackoverflow.com/questions/32013096/bootstrap-3-columns-not-displaying-horizontally-on-desktop

2条答案

按热度按时间

mbskvtky1#

问题是你在你的div上设置了一个margin-line，这样元素就变得比50%大，并且会堆积起来。

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

你可以看到小提琴。
我还在您的image中添加了一个div class="row"和img-responsive，但不是必需的。
https://jsfiddle.net/2oyt71gL/3/

赞(0）回复(0）举报 2022-12-07

1tu0hz3e2#

我刚刚运行了你的代码，我能够通过将你的第二个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>

赞(0）回复(0）举报 2022-12-07

我来回答

Bootstrap 引导3列未在桌面上水平显示

2条答案

相关问题

热门标签

最新问答