Css段落跳了过来

Question

我有一些小的CSS问题。我正在为我的网站使用bootstrap，但是一些网格段落没有像我期望的那样显示。

<div class="col-xs-6 col-lg-4">
<h4>{BTITLE}</h4>
<p><img src="/images/bookies/{BIMG}.gif" class="img-thumbnail" style="float:left; margin: 5px;">{BSHORT}</p>
<p><a class="btn btn-success" href="{BLINK}" role="button" target="_blank">View {BIMG} bonus &raquo;</a></p>

这是每个段落的html代码。以下是有时候的样子。我做了一些测试，当文本/标题的大小太长时，它看起来很糟糕，否则没问题。

为了让自己看起来更好，我应该改变什么？

Answer 1

我看到你试图以某种方式对齐所有6个区块。第1行为3，第二行为后3列。

制作2个单独的行，以便前三列独立于接下来的三行。第二个选项是：您可以设置行的最小高度。最小高度必须等于特定列的最大内容。但我更喜欢将内容分为两个部分。

以下示例代码：

<div class="row">
  <div class="col-lg-4">..</div>
  <div class="col-lg-4">..</div>
  <div class="col-lg-4">..</div>
</div>
<div class="row">
  <div class="col-lg-4">..</div>
  <div class="col-lg-4">..</div>
  <div class="col-lg-4">..</div>
</div>

在XS视口上有一个列，下面是代码：

<div class="row">
   <div class="col-xs-12 col-md-4 col-lg-4">..</div>
   <div class="col-xs-12 col-md-4 col-lg-4">..</div>
   <div class="col-xs-12 col-md-4 col-lg-4">..</div>
</div>
<div class="row">
   <div class="col-xs-12 col-md-4 col-lg-4">..</div>
   <div class="col-xs-12 col-md-4 col-lg-4">..</div>
   <div class="col-xs-12 col-md-4 col-lg-4">..</div>
</div>