Question

我想添加col-lg-3类的bootstrap行。我的div包含不同的高度。添加具有不同长度文本的文章。 my output is 但设计expected output并在此处。代码如下

<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等的值来自mysql数据库。所以高度等于文本行号。 php代码如下 `

    foreach ($value as $add) {
        echo "<div class='col-md-3'><p>";
        echo $add->item;
        echo "</p></div>";
    }
    ?>`

Answer 1

也许，我毁了你的原始代码。我无处不在。我希望这会对你有所帮助。

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

<style> .col-md-3{padding:0px;} // default: 15px -> left and right. </style>

以下是代码：

因为我不知道你的引导版本是什么版本，我使用v3.1.1作为clearfix ...你可以根据你的版本自定义它。

Answer 2

你走在正确的轨道上。这肯定会奏效。你需要像这样使用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>

Answer 3

我想试试这个

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

希望这会对你有帮助..

Answer 4

您可以先使用col-lg-3列，然后将块放在每个列中。这样你就可以获得理想的结果。

HTML：

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

CSS：

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

Jsfiddle：https://jsfiddle.net/debraj/6dufsc4u/1/

希望有所帮助。

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

4 个答案: