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 个块。第一行 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>

Css段跳过

Css paragraphs jump over

html

css

bootstrap-modal