0

I'm trying to create a layout with Bootstrap 3, which will be a repeating listing row:

  • On the left, a fixed-width and height image
  • On the right, an element containing multiple .row elements (each can vary in height)

I've got it partially working, but I've an issue where the first .row on the right has the same height as the image (the .cols inside are correct height). The other rows are then appearing below. I want to avoid defining absolute heights on each row.

I've put an example on jsfiddle: http://jsfiddle.net/yszAs/

Also, I'm not sure if its ok/recommended, but I've given the right-hand-side element a class of container, which appears to help resolve parts of rows extending beyond the container.

Any ideas what I'm doing wrong?

Update

Thanks for the suggestions, but they're not quite what I'm looking to achieve.

I've already got the part where I need the first column to be a fixed width, and the second to fill the remaining space working. There could be an issue with my implementation of this though.

The issue is that the height of the content in the first column is dictating the height of the first element in the second

After a bit more digging, it looks like the clearfix which appears to be automatically included in row elements is causing the issue - because the first column (the image) is floated, the element gets this height.

I've tried giving the first element in the right column a float: left, which solves the issue partially - I then have the problem of it being floated! (See http://jsfiddle.net/gKtE3/).

Any ideas?

4

2 回答 2

0

更新

根据您的评论和新小提琴。是的 .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>
于 2013-09-11T20:56:42.680 回答
0

我相信这就是你想要的：

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

于 2013-09-11T21:04:21.190 回答