Question

我正在尝试解决使用移动设备的引导程序模板的问题...

我从不希望文字覆盖在图片上，但我似乎找不到任何关于如何避免它发生的直接答案。

以下是目前的代码：

<div class="banner-bottom" id="photos">
    <div class="container">
        <div class="bottom-grids">
            <div class="col-md-3 bottom-grid">
                <img src="images/bed.jpg" height="200px">
            </div>
            <div class="col-md-3 bottom-grid">
                <p><b>Philosophy:</b><br> We believe meaningful activities provide an atmosphere of good health and spiritual well-being. The activity program is designed to offer opportunities for friendship and self-worth.</p>
            </div>
            <div class="col-md-3 bottom-grid">
                <img src="images/entry.jpg" height="200px">
            </div>
            <div class="col-md-3 bottom-grid">
                <p><b>Location:</b><br>Located just minutes from downtown Sacramento. Near the Jefferson Boulevard & West Capital Avenue intersection. Close to shopping, churches and senior centers.</p>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
</div>

CSS中没有任何棘手的问题 - col-md-3的典型自举25％宽度。

  .col-md-3 {
    width: 25%;
  }

如何使我的文本区域定义得足够好，以免叠加我的图像？我假设将每个div设置为col-md-3，宽度为25％就足以避免这个问题了，但我显然错过了一些东西。

Answer 1

尝试使用＆＃34; row＆＃34;课程和小屏幕使用＆＃34; col-sm - *＆＃34;根据您的需要显示。

这只是一个示例编辑，可以帮助您从一些事情开始：

<div class="banner-bottom" id="photos">
<div class="container">
    <div class="row bottom-grids">
        <div class="col-md-3 col-sm-3 bottom-grid">
            <img src="images/bed.jpg" height="200px">
        </div>
        <div class="col-md-3 col-sm-3 bottom-grid">
            <p><b>Philosophy:</b><br> We believe meaningful activities provide an atmosphere of good health and spiritual well-being. The activity program is designed to offer opportunities for friendship and self-worth.</p>
        </div>
        <div class="col-md-3 col-sm-3 bottom-grid">
            <img src="images/entry.jpg" height="200px">
        </div>
        <div class="col-md-3 col-sm-3 bottom-grid">
            <p><b>Location:</b><br>Located just minutes from downtown Sacramento. Near the Jefferson Boulevard & West Capital Avenue intersection. Close to shopping, churches and senior centers.</p>
        </div>
        <div class="clearfix"></div>
    </div>
</div>

Answer 2

您应该只在col-**类元素中使用row类。 col-**个类是浮动项，row类具有所有需要clearfix个样式和负边距。像这样：

<div class="banner-bottom" id="photos">
<div class="container">
    <div class="row bottom-grids">
        <div class="col-md-3 col-sm-3 bottom-grid">
            <img src="images/bed.jpg" height="200px">
        </div>
        <div class="col-md-3 col-sm-3 bottom-grid">
            <p><b>Philosophy:</b><br> We believe meaningful activities provide an atmosphere of good health and spiritual well-being. The activity program is designed to offer opportunities for friendship and self-worth.</p>
        </div>
        <div class="col-md-3 col-sm-3 bottom-grid">
            <img src="images/entry.jpg" height="200px">
        </div>
        <div class="col-md-3 col-sm-3 bottom-grid">
            <p><b>Location:</b><br>Located just minutes from downtown Sacramento. Near the Jefferson Boulevard & West Capital Avenue intersection. Close to shopping, churches and senior centers.</p>
        </div>
        <div class="clearfix"></div>
    </div>
</div>

此外，bootstrap为您完成了大量工作，我确信您不需要那些.bottom-grid类和class="clearfix" div。保持尽可能简单，你会看到标记改进。

还有一件事是提供img元素max-width: 100%; height: auto;，因为现在它们与父col-个容器重叠。

Answer 3

请将class="img-responsive"添加到img标记，如下所示

请勿将高度设置为img标记。

<div class="banner-bottom" id="photos">
    <div class="container">
        <div class="bottom-grids">
            <div class="col-md-3 bottom-grid">
                <img class="img-responsive" src="images/bed.jpg">
            </div>
            <div class="col-md-3 bottom-grid">
                <p><b>Philosophy:</b><br> We believe meaningful activities provide an atmosphere of good health and spiritual well-being. The activity program is designed to offer opportunities for friendship and self-worth.</p>
            </div>
            <div class="col-md-3 bottom-grid">
                <img class="img-responsive" src="images/entry.jpg">
            </div>
            <div class="col-md-3 bottom-grid">
                <p><b>Location:</b><br>Located just minutes from downtown Sacramento. Near the Jefferson Boulevard & West Capital Avenue intersection. Close to shopping, churches and senior centers.</p>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
</div>

Bootstrap模板允许文字叠加照片

3 个答案: