html - 如何在 和 float 之间添加边距？

Question

我使用的是 Bootstrap 2.3.2，但我无法弄清楚如何在我的段落文本右侧和同一行中 float 的图像之间留出空间边距(row-fluid)。

如果我向图像添加填充，它会失去圆 Angular 。如果我在 <p> 的右侧添加边距, 它不起作用，因为 float 图像的位置不受它的影响。

如果我在图像周围添加边距，或者将图像包裹在带有填充或边距的 div 中，仍然没有任何变化。

Here is a fiddle demonstrating the issue .

Answer 1

您正在将 Bootstrap 2 样式标签与 Bootstrap 3 一起使用!

试试这个 Bootply，它现在使用正确的 Bootstrap 3 类。 bootstrap 3 的列之间已经有一个装订线，可以解决您的问题。

http://www.bootply.com/do2jrDs2OJ#

或者这个片段:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
  <div class="col-xs-8">
    <p>Lorem ipsum dolor sit amet, egestas elit eget libero vehicula nullam, dictum condimentum erat quisque ut donec. Natoque elementum nunc pellentesque dictumst rutrum, odio eget, et ac nonummy ligula aliquam, aliquam id quam malesuada fermentum, adipiscing volutpat neque varius aliquam varius. Vel semper dolor a eu convallis, quam quam proin enim mi ac vehicula, nisl commodo, risus tellus id, morbi nec. Porttitor accumsan et mi quis. Dis vestibulum et velit vehicula, neque nulla sem wisi sit at vel, ac lacinia. Amet inceptos consequat et interdum commodo in, libero velit vestibulum condimentum a eros morbi.</p>    
  </div>
  <div class="col-xs-4">
  <img class="img-rounded" src="http://placehold.it/200x200">
  </div>
</div>  
</div>  

如果您确实需要使用 Bootstrap 2，那么您仍然需要遵循文档中定义的正确类层次结构。

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"/>


<div class="container">
  <div class="row-fluid">
    <div class="span8">
      <p>
        Lorem ipsum dolor sit amet, egestas elit eget libero vehicula nullam, dictum condimentum erat quisque ut donec. Natoque elementum nunc pellentesque dictumst rutrum, odio eget, et ac nonummy ligula aliquam, aliquam id quam malesuada fermentum, adipiscing volutpat neque varius aliquam varius. Vel semper dolor a eu convallis, quam quam proin enim mi ac vehicula, nisl commodo, risus tellus id, morbi nec. Porttitor accumsan et mi quis. Dis vestibulum et velit vehicula, neque nulla sem wisi sit at vel, ac lacinia. Amet inceptos consequat et interdum commodo in, libero velit vestibulum condimentum a eros morbi.
      </p>
    </div>
    <div class="span4">
          <img class="pull-right img-rounded" src="http://placehold.it/200x200">
    </div>
  </div>  
</div>