Bootstrap 3列流体行左侧的浮动图像

Question

我正在尝试在 3 列流体行 (Bootstrap) 的左侧浮动一个小云图像。这是我的代码：

      <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:info@albancloud.com" style="text-decoration:underline;">Our Email : info@albancloud.com</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>

我已确保跨度类数加起来为 12，但我不知道如何考虑脚手架系统中的浮动图像。

理想情况下，我希望云位于最左侧英雄单位的右上角（“快速链接”）

这是当前结果：

我需要将第三个英雄单元放在同一行 - 我尝试将 img 放在 row-fluid div 之外，以及使用 inline-block 和阻止以及负边距

P.S 我对浮动的替代方案持开放态度，因为我希望它具有响应性

注意：我没有指定比上例中给出的内联 CSS 更多的样式，其余的只是默认的 Bootstrap

Answer 1

您可以将图像移动到第一个框内，然后定位它：

<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:info@albancloud.com" style="text-decoration:underline;">Our Email : info@albancloud.com</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

希望这会有所帮助！