CSS (Bootstrap 3) - 固定宽度和容器，并排

Question

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

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

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

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

另外，我不确定它是否可以/推荐，但我已为右侧元素提供了 container 类，这似乎有助于解决超出容器的行的部分问题。

任何想法我做错了什么？

---

更新

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

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

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

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

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

有什么想法吗？

Answer 1

更新

基于您的 cmets 和新小提琴。是的 .row 有一个clearfix。您可以通过将溢出设置为自动 (https://stackoverflow.com/a/9770351/1596547) 来撤消 .row clearfix。请参阅：http://bootply.com/80492。 CSS：.row{margin:0; overflow:auto;}

--结束更新--

您的问题是由 .row 类的 -15px 的 margin-left 引起的（与 float left 结合使用）。

解决方案使用.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 减去右侧百分比宽度时，就会发生这种情况。