我的代码中的col-md-4类未正确格式化

时间:2019-04-05 14:25:29

标签: html css twitter-bootstrap

我有一个PHP类,带有HTML代码,在一列中连续显示三张卡。当我在页面上添加8个以上的项目时,其格式设置不正确,即,它将连续放置3个,这意味着先放置1个然后再放置3个,依此类推(请参见所附图片)。不确定为什么会这样。

<div class="container">
  <div class="col-md-4">
    <div class="card profile-card-2">

      <div class="card-img-block">
        <?php echo'<img class="img-fluid" src="data:image/jpg;base64,' . base64_encode( $results['image'] ) . '"  />' ?>
      </div>

      <div class="card-body pt-5">
        <h5 class="card-title"><?php echo $results['name']?></h5>
        <h5 class="card-text"><?php echo "Event Attended: ".$results['event_attended']." "?></h5>
        <h5 class="card-text"><?php echo "Charity: ".$results['charity_name']." "?></h5>
        <p class="card-text"><?php echo $results['feedback']?></p>
      </div>

      <div class="w3-half event">
        <button class="myBtn btn btn-primary">Read More</button>
        <div id="myModal" class="modal details-modal" class="modal-fade" tabindex="-1" role="dialog" aria-hidden="true">
          <div class="modal-dialog modal-lg" role="document">

            <!-- Modal content -->
            <div class="modal-content">
              <div class="modal-header">
                <h2 class="modal-title"><?php ?></h2>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body">
                <h3>Event Description </h3>
                <h5 class="card-title"><?php echo $results['name']?></h5>
                <h5 class="card-text"><?php echo "Event Attended: ".$results['event_attended']." "?></h5>
                <h5 class="card-text"><?php echo "Charity: ".$results['charity_name']." "?></h5>
                <hr>
                <p><?php echo $results['feedback'] ?><br></p>
              </div>
              <div class="modal-footer">
              </div>
            </div>

          </div>
        </div>
      </div>

    </div>
  </div>
</div>

它打算连续显示3,并在需要的地方开始新的一行

enter image description here

0 个答案:

没有答案