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中看起来很棒：

Chrome

但它根本不适用于Firefox或IE：

Firefox

我在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

<强>解释

通常人们都会想要使用Bootstrap定位系统，实际上，Bootstrap的优势在于它的定位系统，所以当我们在布局中思考时，我们必须考虑BS网格，那么，我们如何想要设计那些网格。

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

Answer 2

您的问题来自 display：table; CSS属性 - 浏览器在渲染表中存在一些差异，因此除非您需要它，否则当您只需要一个CSS网格时它就无用了使用bootstrap的列。

Answer 3

在找不到合适的纯CSS解决方案之后，我找到了一个使用jQuery的浏览器：

$(document).ready(function() {
  $(".img-responsive").each(function (index, element) {
        $(element).css("max-width", $(element).closest("div[class^='col-'],div[class*=' col-']").innerWidth());
    });
});

（注意：真正的实现将使用比“.img-responsive”更好的选择器）

Answer 4

将类.img-centered添加到您的img标记

.img-centered{
       margin:0 auto;
       float : none;
       display:block;
}

它使你的形象居中

在保持图像响应性的同时，如何将模板化显示控件集中在Bootstrap中？

4 个答案: