Question

使用bootstrap 3，我不明白agent-banner div中的内容，当我调整浏览器大小时，第三列与第二列重叠。它在移动视图中整齐地堆叠，但我不希望在调整大小状态中发生任何重叠。我该如何解决这个问题？

HTML：

<div class="agent-banner">
<div class="container">
    <div class="row">
        <div class="col-md-6 col-xs-12">
            <div class="widget">
            </div>
        </div>
        <div class="col-md-3 col-xs-12">
            <img itemprop="image" alt="name" src="https://hsl-pnw-downloadable-files.s3.amazonaws.com/7/6922202604004dcb8ba0fa88058c8075-width-300.jpg">
            <h2>Name</h2>
            <p class="designations">
                <%= profile.designations %>
                    <button type="button" class="empty-btn" data-toggle="popover" data-trigger="focus" title="<%- theme_data.designation_pop_title %>" data-placement="top" data-content="<%- theme_data.designation_pop_msg %>"></button>
            </p>
            <h3>
              Job title
            </h3>
            <a href="#">Visit Website</a>
        </div>
        <div class="col-md-3 col-xs-12">
            <div id="map-container">
            </div>
            <p class="agent-address">
                Address
            </p>
            <a href="#">View Map and Directions</a>
        </div>
    </div>
</div>

CSS：

    #sem_page {
  .visible-lg {
    display: none !important;
  }

  .agent-banner h2 {
    font-family: FranklinGothicDemi;
    font-size: 26px;
    margin-top: 20px;
  }
  .agent-banner h3 {
    font-size: 18px;
    margin-top: 5px;
    margin-bottom: 20px;
    font-family: FranklinGothicReg;
  }
  .agent-banner a {
    font-family: FranklinGothicDemi;
  }
  #map-container {
    background-color: #ddd;
    height: 235px;
  }
  .agent-address {
    padding: 25px 0;
  }
  .agent-banner {
    padding: 90px 15px;
    background-color: #f1f1f1;
  }
  .widget {
    height: 350px;
    background-color: #e1261c;
  }
}

Answer 1

尝试在scss / css中添加img[itemprop="image"]{ max-width:100%}。我想，这是因为你的图像占据了它的全宽。

on codepen

当浏览器调整大小时，第三列与第二列重叠？

1 个答案: