0

我正在尝试将云的小图像浮动到 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-fluiddiv 之外，以及使用inline-block和阻止以及负边距

PS我对浮动的替代方案持开放态度，因为我希望它能够响应

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

4

1 回答 1

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

希望这可以帮助！

于 2013-05-23T00:13:25.423 回答