Question

我正在使用Bootstrap 2.3.2并且我无法弄清楚如何在段落文本的右侧和同一行中浮动的图像（行 - 流体）之间获得空间余量。

如果我在图像上添加填充，则会丢失它的圆角。如果我在<p>的右侧添加了一个边距，则它不起作用，因为浮动图像的位置不受其影响。

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

Here is a fiddle demonstrating the issue

Answer 1

您正在使用Bootstrap 3样式标签和Bootstrap 3！

尝试使用正在使用正确的Bootstrap 3类的Bootply。 bootstrap 3已经在列之间有一个排水沟，解决了你的问题。

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

或者这个片段：

＆＃13;

<!-- 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>

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

您是否忘记在原始小提琴中加入您的课程（如pull-right）？也许这就是为什么它不起作用。将margin-left: 50px;添加到浮动图像就可以了。

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

还要记住在CSS属性后添加分号 - 它们不是可选的。

Answer 3

首先，你在Bootply中混合了样式，所以我为你建立了一个小提琴，see here。
其次，如果你使用行液，你需要使用容器液来使它工作
第三，影响Bootstrap中元素的边距显然会影响网格和响应状态，因此最好使用填充。在这个例子中，我为图像容器添加了一个额外的类，以便我们可以轻松定位，但当然，您可以将该类添加到段落中。

所以，不用多说，这里的代码看起来应该更多或更少（显然你应该根据自己的需要调整代码）

<div class="container-fluid">
    <div class="row-fluid">
        <img class="span4 pull-right img-rounded imagebox" src="http://placehold.it/200x200" />

            <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>

和一点点CSS

.imagebox {
    padding:0 0 20px 20px
}

就是这样。所有这些都说，如果可以的话，转移到Bootstrap 3，但与此同时，在这里你有解决问题的方法

如何在<p>和浮动<img/>之间添加边距？</p>

3 个答案: