twitter-bootstrap Bootstrap 3 列流体行左侧的浮动图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16703567/
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
Floating image to the left of Bootstrap 3 column fluid row
提问by adaam
I am trying to float a little image of a cloud to the left of a 3 column fluid row (Bootstrap). Here is my code:
我试图在一个 3 列流体行（引导程序）的左侧浮动一个云的小图像。这是我的代码：
<img src="img/cloud1.png" style="width:100px;float:left;">
<div class="row-fluid" style="margin-top:50px;">
<div class="span4 hero-unit" style="min-height:400px;background-color:#FFCFD9;">
<h3>Quick Links</h3>
<p><a href="mailto:[email protected]" style="text-decoration:underline;">Our Email : [email protected]</a>
</p>
<p><a href="pricing.php" style="text-decoration:underline;">Pricing options</a>
</p>
</div>
<div class="span4 hero-unit" style="min-height:400px;background-color:#CAF9FC;">
<h3>What We Do</h3>
<p>albanCloud provides security and flexability to your Business's IT. We provide our clients with a fully managed service for their cloud backups and virtual servers.
</p>
</div>
<div class="span4 hero-unit" style="min-height:400px;background-color:#FCF6A2;">
<h3>Where We Operate</h3>
<p>
Hertfordshire area, St Albans, Luton, Harpenden, Hatfield, Hemel, Welyn, Watford, Harrow, Barnet.
</p>
</div>
</div>
I've made sure that the span class numbers add up to 12 but I don't know how to take into account floating images within the scaffolding system.
我已经确保跨度类号加起来为 12，但我不知道如何考虑脚手架系统中的浮动图像。
Ideally I'd like the cloud to sit on the top right hand corner of the left most hero unit ("Quick Links")
理想情况下，我希望云位于最左侧英雄单位的右上角（“快速链接”）
This is the current result:
这是当前的结果：
I need for the third hero-unit to fit on the same row - I've tried putting the img outside of the row-fluiddiv, as well as using inline-blockand block and also negative margins
我需要第三个英雄单元适合同一行 - 我已经尝试将 img 放在row-fluiddiv之外，以及使用inline-block和阻止以及负边距
P.S I am open to alternatives to float as I want this to be responsive
PS 我对浮动的替代方案持开放态度，因为我希望它具有响应性
Note: I haven't specified any more stylings than the inline CSS given in the example above, the rest is just default Bootstrap
注意：我没有指定比上面例子中给出的内联 CSS 更多的样式，其余的只是默认的 Bootstrap
回答by cortex
You can move your image inside the first box and then position it:
您可以将图像移动到第一个框内，然后将其定位：
<div class="row-fluid quick-links" style="margin-top:50px;">
<div class="span4 hero-unit" style="padding:20px;min-height:400px;background-color:#FFCFD9;">
<img src="img/cloud1.png" class="cloud" >
<h3>Quick Links</h3>
<p><a href="mailto:[email protected]" style="text-decoration:underline;">Our Email : [email protected]</a></p>
<p><a href="pricing.php" style="text-decoration:underline;">Pricing options</a></p>
</div>
...
</div>
.quick-links {
position: relative;
end
.cloud {
position: absolute;
top: 0px; # Maybe you should update this value.
left: 0px; # Maybe you should update this value.
end
Hope this helps!
希望这可以帮助！
