Question

我正在尝试使用Bootstrap 3创建一个布局，这将是一个重复的列表行：

左侧是固定宽度和高度的图像
在右侧，包含多个.row元素的元素（每个元素的高度可能不同）

我已经部分工作了，但我有一个问题，右边的第一个.row与图像的高度相同（里面的.col是正确的高度）。然后其他行出现在下面。我想避免在每一行上定义绝对高度。

我在jsfiddle上做了一个例子：http://jsfiddle.net/yszAs/

另外，我不确定它是否正常/推荐，但是我给了右侧元素一类container，它似乎有助于解决超出容器的行的部分行。

任何想法我做错了什么？

更新

感谢您的建议，但他们并不是我想要实现的目标。

我已经得到了我需要第一列固定宽度的部分，第二列填充剩余空间。但是我的实现可能存在问题。

~~问题是第一列中内容的高度决定了第二列中第一个元素的高度~~

经过一番挖掘，看起来似乎自动包含在clearfix元素中的row导致问题 - 因为第一列（图像）浮动，元素得到这个高度。

我尝试在右列中给出第一个元素float: left，这部分解决了问题 - 然后我遇到了浮动的问题！（见http://jsfiddle.net/gKtE3/）。

有什么想法吗？

Answer 1

<强>更新

根据您的评论和新的小提琴。是的。有一个clearfix。您可以通过将溢出设置为auto（https://stackoverflow.com/a/9770351/1596547）来撤消.row clearfix。见：http://bootply.com/80492。 CSS：.row{margin:0; overflow:auto;}

- 结束更新 -

你的问题是由.row类的-15px的左边距（与左边的浮动组合）造成的。

解决方案使用.row {margin-left: 0px;}或将.info类的左边距设置为195px;

如果您允许对图像进行响应，请考虑将列嵌套为：

<div class="container">
    <div class="img-and-info row">
        <div class="col-xs-2">

        <img src="http://dummyimage.com/180x120/" class="img-responsive">
        </div>

        <div class="info col-xs-10">
            <div class="row">
                <div class="col-xs-6">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam massa elit, lacinia ac dui et. </p>
                </div>
                <div class="col-xs-6">Col 2</div>
            </div>
            <div class="row">
                <div class="col-xs-4">Col 1</div>
                <div class="col-xs-8">Col 2</div>
            </div>
            <div class="row">
                <div class="col-xs-9">Col 1</div>
                <div class="col-xs-3">Col 2</div>
            </div>
        </div>
    </div>
</div>

Answer 2

我相信这就是你想要的：

<div class="container">
     <div class="row">
         <div class="img"></div>
                <div class="container col-xs-8">
                    <div class="row">
                        <div class="col-xs-6">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam massa elit, lacinia ac dui et. </p>
                        </div>
                        <div class="col-xs-6">Col 2</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-4">Col 1</div>
                        <div class="col-xs-8">Col 2</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-9">Col 1</div>
                        <div class="col-xs-3">Col 2</div>
                    </div>
                </div>
            </div>
</div>

http://jsfiddle.net/R4NbW/

不确定右侧的预期行为是什么，固定宽度？可变宽度？

如果窗户不够大，不适合右侧，上面的小提琴会破裂。当固定宽度图像大于100减去右侧百分比宽度时会发生这种情况。

CSS（Bootstrap 3） - 固定宽度和容器，并排

更新

2 个答案: