浮动图像位于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

希望这有帮助！