twitter-bootstrap Bootstrap 3 按列调整大小的图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21617360/
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
Bootstrap 3 Image sized by column
提问by Gisto
This would be easy with just CSS, but I can't figure out how to do it using by using Bootstrap.
仅使用 CSS 就很容易做到这一点，但我不知道如何通过使用 Bootstrap 来实现。
I want to have an image where the text wraps around it, either floated left or right. However I want it 3 columns wide for md and lg sized screens, and fill the single column for xs and sm sized screens.
我想要一个图像，文本环绕它，向左或向右浮动。但是，对于 md 和 lg 大小的屏幕，我希望它有 3 列宽，并为 xs 和 sm 大小的屏幕填充单列。
So on larger screens, something like this (worst sketch ever right here):
所以在更大的屏幕上，像这样的东西（这里有史以来最糟糕的草图）：
Now, I sort of have it working...though it seems to only span 2 columns and I'm not sure why:
现在，我有点让它工作......虽然它似乎只跨越 2 列，我不知道为什么：
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="row">
<h2>About Them Guys</h2>
<p class="intro">Home is where you hang your hat. Flank shank bacon, fatback boudin ham tongue beef ribs pig brisket pancetta frankfurter. Jerky pig biltong, chicken hamburger swine corned beef beef ribs beef jowl.</p>
<div class="col-md-11 col-md-offset-1">
<p><img src="http://img690.imageshack.us/img690/5169/36ng.png" class="col-md-3 img-responsive pull-left" alt="" />Bacon ipsum dolor sit amet short loin jerky salami sausage, hamburger t-bone doner filet mignon sirloin beef. Tail short ribs jerky leberkas prosciutto pastrami fatback jowl turkey t-bone bacon. Hamburger tail tri-tip, ribeye ham hock leberkas meatball pig short ribs jerky meatloaf. Flank shank bacon, fatback boudin ham tongue beef ribs pig brisket pancetta frankfurter. Jerky pig biltong, chicken hamburger swine corned beef beef ribs beef jowl. Kevin cow turducken, pancetta fatback swine pig boudin ball tip kielbasa venison. Pig salami capicola chuck pancetta pork.</p>
</div>
</div> <!--row-->
</div> <!--col offset-->
</div> <!--row-->
If that entire paragraph is offset by a column is the image col-md-3counting that first column offset as "1"? If I use col-md-4then it does span the 3 columns - wanting to make sure there's something I'm not missing.
如果整个段落被一列偏移，图像是否将col-md-3第一列偏移计算为“1”？如果我使用，col-md-4那么它确实跨越 3 列 - 想确保我没有遗漏一些东西。
Thanks!
谢谢！
回答by Arun
This shoud work
这应该工作
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="row">
<h2>About Them Guys</h2>
<p class="intro">Home is where you hang your hat. Flank shank bacon, fatback boudin ham tongue beef ribs pig brisket pancetta frankfurter. Jerky pig biltong, chicken hamburger swine corned beef beef ribs beef jowl.</p>
<div class="col-md-11 col-sm-12 col-xs-12 col-md-offset-1">
<p><img src="http://img690.imageshack.us/img690/5169/36ng.png" class="col-md-3 img-responsive pull-left" alt="" />Bacon ipsum dolor sit amet short loin jerky salami sausage, hamburger t-bone doner filet mignon sirloin beef. Tail short ribs jerky leberkas prosciutto pastrami fatback jowl turkey t-bone bacon. Hamburger tail tri-tip, ribeye ham hock leberkas meatball pig short ribs jerky meatloaf. Flank shank bacon, fatback boudin ham tongue beef ribs pig brisket pancetta frankfurter. Jerky pig biltong, chicken hamburger swine corned beef beef ribs beef jowl. Kevin cow turducken, pancetta fatback swine pig boudin ball tip kielbasa venison. Pig salami capicola chuck pancetta pork.</p>
</div>
</div> <!--row-->
</div> <!--col offset-->
</div>
