html - 如何在保持图像响应能力的同时在 Bootstrap 中将模板化显示控件居中？

Question

我有一个模板化显示控件，我正试图将其放在 Bootstrap 中的网格上。我可以控制模板化显示中的 HTML 和样式，但不能控制它周围的 HTML、网格大小或图像源。

模板包含带有响应图像的左对齐标题:

<div class="container">
    <div class="row">
        <div class="col-xs-12">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae mattis diam. Aliquam sodales urna non urna accumsan, eget tempus arcu viverra. Vestibulum dui risus, eleifend vel aliquam ...
            <!-- Start repeated code element -->
            <div id="center-me" style="margin-left: auto; margin-right: auto; display: table; border: 1px solid blue;">
                <h4 id="must-be-lined-up-with-image">Left Justified Header</h4>
                <img id="must-be-responsive" src="http://i.imgur.com/ISRUCaV.jpg" class="img-responsive">
            </div>
            <!-- End repeated code element -->
            Ut fermentum neque elit, nec ultricies est ultrices ac. Ut luctus purus ac mi euismod sodales. Aliquam auctor posuere sodales. Proin sed nulla condimentum, tempor arcu ut, congue elit. Cras ... 
        </div>
    </div>
    <div class="row">
        <div class="col-xs-4">
            <!-- Start repeated code element -->
            <div id="Div1" style="margin-left: auto; margin-right: auto; display: table; border: 1px solid blue;">
                <h4 id="H1">Left Justified Header</h4>
                <img id="Img1" src="http://i.imgur.com/ISRUCaV.jpg" class="img-responsive">
            </div>
            <!-- End repeated code element -->
        </div>
        <div class="col-xs-4">
            <!-- Start repeated code element -->
            <div id="Div2" style="margin-left: auto; margin-right: auto; display: table; border: 1px solid blue;">
                <h4 id="H2">Left Justified Header</h4>
                <img id="Img2" src="http://i.imgur.com/ISRUCaV.jpg" class="img-responsive">
            </div>
            <!-- End repeated code element -->
        </div>
        <div class="col-xs-4">
            <!-- Start repeated code element -->
            <div id="Div3" style="margin-left: auto; margin-right: auto; display: table; border: 1px solid blue;">
                <h4 id="H3">Left Justified Header</h4>
                <img id="Img3" src="http://i.imgur.com/ISRUCaV.jpg" class="img-responsive">
            </div>
            <!-- End repeated code element -->
        </div>
    </div>
</div>

对模板本身还有额外的要求:

• 标题必须左对齐并与图片对齐
• 图片不能超过100%
• 标题和图像的容器必须在页面上居中
• 如果图片大于网格尺寸，必须适当缩小以适应网格

此屏幕截图是需要实现的确切布局。

它在 Chrome 中看起来很棒:

但它在 Firefox 或 IE 上根本不起作用:

我已经在 Bootply 上创建了一个我想要实现的示例:http://www.bootply.com/ZSNbC15oyA

Answer 1

好吧，答案真的很简单:您只需删除那些添加的 DIV 元素，以扼杀列网格的响应能力

<div id="Div1" style="margin-left: auto; margin-right: auto; display: table; border: 1px solid blue;">

正如我们所做的那样，您可以删除所有图像的相同 ID 并替换为类以便于操作，因此添加以下 CSS

.col-xs-4 .myBox, .col-xs-12 .myBox{border: 1px solid blue; margin:10px auto; width:90%}
.must-be-responsive{width:100%; height:auto;}

无论如何，看看这个bootply我从你的例子中 fork

解释:

通常人们会忍不住想乱用Bootstrap的定位系统，其实Bootstrap的强项就是它的定位系统，所以我们在布局的时候一定要从BS网格的 Angular 去思考，那么，我们如何想要设置这些网格的样式。

如果我们需要额外的带有边距和间距的样式，我们知道边距会影响网格系统，所以这种样式很可能来自网格内添加的其他元素。因此，在这种特殊情况下，我添加了一个类为 .myBox 的 div，它具有蓝色边框、90% 宽度和水平边距属性 auto 只是为了确保它将适合任何宽度