twitter-bootstrap CSS (Bootstrap 3) - 固定宽度和容器，并排
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18750174/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS (Bootstrap 3 ) - Fixed width and container, side-by-side
提问by Josh
I'm trying to create a layout with Bootstrap 3, which will be a repeating listing row:
我正在尝试使用 Bootstrap 3 创建一个布局，这将是一个重复的列表行：
- On the left, a fixed-width and height image
- On the right, an element containing multiple
.rowelements (each can vary in height)
- 在左边，一个固定宽度和高度的图像
- 在右侧，一个包含多个
.row元素的元素（每个元素的高度可以不同）
I've got it partially working, but I've an issue where the first .rowon 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.
我让它部分工作，但我有一个问题，.row右边第一个与图像的高度相同（.col里面的s 是正确的高度）。然后其他行出现在下面。我想避免在每一行上定义绝对高度。
I've put an example on jsfiddle: http://jsfiddle.net/yszAs/
我在 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.
另外，我不确定它是否可以/推荐，但我已经给了右侧元素一个 类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 clearfixwhich appears to be automatically included in rowelements is causing the issue - because the first column (the image) is floated, the element gets this height.
经过更多的挖掘，看起来clearfix似乎自动包含在row元素中的 导致了问题 - 因为第一列（图像）是浮动的，元素获得了这个高度。
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/).
我试过给右列中的第一个元素 a float: left，这部分解决了这个问题 - 然后我遇到了它被浮动的问题！（见http://jsfiddle.net/gKtE3/）。
Any ideas?
有任何想法吗？
采纳答案by Bass Jobsen
update
更新
Based on your comments and new fiddle. Yes .row have a clearfix. You could undo the .row clearfix by setting the overflow to auto (https://stackoverflow.com/a/9770351/1596547). See: http://bootply.com/80492. CSS: .row{margin:0; overflow:auto;}
根据您的评论和新小提琴。是的 .row 有一个明确的修正。您可以通过将溢出设置为自动（https://stackoverflow.com/a/9770351/1596547）来撤消 .row clearfix 。请参阅：http: //bootply.com/80492。CSS：.row{margin:0; overflow:auto;}
--end update--
--结束更新--
Your problem is cause by the margin-left of -15px of the .row class (in combination with the float left).
您的问题是由 .row 类的 -15px 的 margin-left 引起的（与左浮动相结合）。
Solution use .row {margin-left: 0px;}or set the left margin of your .infoclass to 195px;
解决方案使用.row {margin-left: 0px;}或将类的左边距设置.info为 195px；
If you allow to make your image responsive, consider nesting your columns like:
如果您允许使图像具有响应性，请考虑嵌套列，例如：
<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>
回答by EddieFerrer
I believe this is what you want:
我相信这就是你想要的：
<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>
Not sure what your intended behavior for the right side is, fixed width? variable width?
不确定右侧的预期行为是什么，固定宽度？可变宽度？
The above fiddle will break if the window isn't big enough to fit the right side. This happens when your fixed width image is greater than 100 minus the width of the right side percentage wise.
如果窗口不够大以适合右侧，则上面的小提琴会损坏。当您的固定宽度图像大于 100 减去右侧百分比宽度时，就会发生这种情况。
