Javascript 具有不同高度的引导布局行

我想用

col-lg-3

类添加引导行。我的

div

包含不同的高度。希望添加不同长度文本的文章。 但是这里设计的很好。代码如下

<div class="row">
    <div class="col-lg-3" style="background-color: #c5d5cb"><p style="height: 150px">1</p></div>
    <div class="col-lg-3" style="background-color: #9fa8a3"><p style="height: 200px">2</p></div>
    <div class="col-lg-3" style="background-color: #e3e0cf"><p style="height: 50px">3</p></div>
    <div class="col-lg-3" style="background-color: #b3c2bf"><p style="height: 60px">4</p></div>  

    <div class="col-lg-3" style="background-color: #173e43"><p style="height: 44px">5</p></div>
    <div class="col-lg-3" style="background-color: #b56969"><p style="height: 70px">6</p></div>
    <div class="col-lg-3" style="background-color: #daad86"><p style="height: 20px">7</p></div>
    <div class="col-lg-3" style="background-color: #5a5c51"><p style="height: 35px">8</p></div> 
</div>

1
2
3
4
5
6
7
8

已更新 放为1、2、3等的值来自mysql数据库。因此，高度等于文本行号。php代码如下 `

foreach（$value as$add）{
回声“”；
echo$add->item；
回声“
”；
}
?>`

我想试试这个

<div class="row">
  <div class="col-lg-5">
   <div id="1"  ></div>
   <div id="5"  ></div>
  </div>
<div class="col-lg-5">
   <div id="2"  ></div>
   <div id="6"  ></div>
  </div>
<div class="col-lg-5">
   <div id="3"  ></div>
   <div id="7"  ></div>
  </div>
<div class="col-lg-5">
   <div id="4"  ></div>
   <div id="8"  ></div>
  </div>
</div>

---

希望这对你有所帮助。

你走上了正确的道路。这肯定会奏效的。您需要像这样使用col-md-3：

<div class="row">
<div class="col-md-3">
    <p>1</p>
    <p>5</p>
</div>
<div class="col-md-3">
   <p>2</p>
   <p>6</p>
</div>
<div class="col-md-3">
   <p>3</p>
   <p>7</p>
</div>
<div class="col-md-3">
   <p>4</p>
   <p>8</p>
</div>
</div>

一,

五,

二,

六,

三,

七,

四,

八,

也许，我毁了你原来的代码。我到处换衣服。我希望这对你有帮助

在标记头中添加自定义样式表：

.col-md-3{padding:0px；}//默认值：15px->左侧和右侧。

代码如下：

1.
5.
2.
6.
3.
7.
4.
8.

---

因为我不知道您的引导程序是什么版本，所以我使用

v3.1.1

作为

clearfix

。。。您可以根据您的版本对此进行自定义。

您可以先将列与

col-lg-3

一起使用，然后将块放在每个列中。这样你就会得到你想要的结果

HTML:

Jsfiddle：

---

希望能有所帮助。

可能重复上一个问题，然后用新问题重新开始，以澄清问题。这个问题没有很好地暴露出来，需要澄清。它的工作非常完美@herman你有没有想法把这些

div

放在sql结果中

首先结束这个问题，然后重新开始你的新问题，因为你的问题与mysql脚本无关。此外，未来的成员将阅读此文章，并查看问题是否已解决。如果您解释了为什么此方法有效，而不是仅使用带有“try this”的代码转储，这将是一个更好的答案。。。
<div class="row">
<div class="col-md-3">
    <p>1</p>
    <p>5</p>
</div>
<div class="col-md-3">
   <p>2</p>
   <p>6</p>
</div>
<div class="col-md-3">
   <p>3</p>
   <p>7</p>
</div>
<div class="col-md-3">
   <p>4</p>
   <p>8</p>
</div>
</div>

<div class="container">
  <div class="row">
    <div class="col-lg-3 grid-row">
      <div class="left-block" style="background-color: #c5d5cb"><p style="height: 150px">1</p></div>
      <div class="left-block" style="background-color: #173e43"><p style="height: 44px">5</p></div>
    </div>
    <div class="col-lg-3 grid-row">
      <div class="left-block" style="background-color: #9fa8a3"><p style="height: 200px">2</p></div>
      <div class="left-block" style="background-color: #b56969"><p style="height: 70px">6</p></div>
    </div>
    <div class="col-lg-3 grid-row">
      <div class="left-block" style="background-color: #e3e0cf"><p style="height: 50px">3</p></div>
      <div class="left-block" style="background-color: #daad86"><p style="height: 20px">7</p></div>
    </div>
    <div class="col-lg-3 grid-row">
      <div class="left-block" style="background-color: #b3c2bf"><p style="height: 60px">4</p></div>
      <div class="left-block" style="background-color: #5a5c51"><p style="height: 35px">8</p></div>
    </div>
  </div>
</div>

.grid-row{
  margin-left: -15px;
  margin-right: -15px;
}
.left-block{
  float: left;
  width: 100%;
}