这对于CSS来说很容易,但我无法弄清楚如何使用Bootstrap来实现它。
我希望有一个图像,文本环绕它,向左或向右浮动。但是我想要md和lg大小的屏幕有3列宽,并且在xs和sm大小的屏幕上填充单列。
所以在更大的屏幕上,这样的事情(这里最糟糕的草图):
现在,我有点工作......虽然它似乎只跨越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-->
如果整个段落被列偏移,则图像col-md-3
将第一列偏移量计为“1”?如果我使用col-md-4
那么它确实跨越了3列 - 想要确保我不缺少的东西。
谢谢!
答案 0 :(得分:1)
这应该有效
<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>