Question

我正在尝试创建一个响应式网站，一个博客，但我遇到了一个问题，引导网格我有每个博客col-lg-4但它们的高度不同，它遵循一个模式，保持相同的线列，但我想删除多余的空格。希望周围的人都能提供帮助。

import cx_Oracle
import collections
import re
import numpy as np
import matplotlib.pyplot as plt
con = cx_Oracle.connect('user/passwordenter image description here@127.0.0.1/XE')
cur = con.cursor()
cur.execute('select salary,employee_id from hr.employees  where employee_id in(100,101)')
graphArray = []


for row in cur:
    startingInfo = str(row).replace(')','').replace('(','').replace('u\'','').replace("'","")
    splitInfo = startingInfo.split(',')
    graphArrayAppend = splitInfo[0]+','+splitInfo[1]
    print graphArrayAppend
    graphArray.append(graphArrayAppend)
    datestamp, value = np.loadtxt(graphArray,delimiter=', ', unpack=True)


plt.plot_date(datestamp, value, 'b-', linewidth=2)
plt.show()

我目前的博客结构

我想要它的方式

Answer 1

查看您正在寻找的UI设计

     <div class="row">
        <div class="col-md-4">
          <div class="row">
              BLOG 1
          </div>
          <div class="row">
             BLOG 4
          </div>
        </div>
        <div class="col-md-4">
            BLOG 2
        </div>
        <div class="col-md-4">
            BLOG 3
        </div>
     </div>

Answer 2

我假设您使用的是最新的BS版本。如果是这样，你应该看看：

Card columns

可以将卡片组织成Masonry - 就像只包含CSS的列一样，将它们包装在.card-columns中。卡片使用CSS列属性而不是flexbox构建，以便更容易对齐。卡片从上到下，从左到右排序。

以下是文档中的示例

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  
  <div class="row">
    
<div class="card-columns">
  <div class="card">
    <img class="card-img-top img-fluid" src="https://dummyimage.com/300" alt="Card image cap">
    <div class="card-block">
      <h4 class="card-title">Card title that wraps to a new line</h4>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
  </div>
  <div class="card p-3">
    <blockquote class="card-block card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer>
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <img class="card-img-top img-fluid" src="https://dummyimage.com/300" alt="Card image cap">
    <div class="card-block">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card card-inverse card-primary p-3 text-center">
    <blockquote class="card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
      <footer>
        <small>
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card text-center">
    <div class="card-block">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img img-fluid" src="https://dummyimage.com/300" alt="Card image">
  </div>
  <div class="card p-3 text-right">
    <blockquote class="card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer>
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <div class="card-block">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>
    
  </div>
  
  
</div>

＆＃13;

Answer 3

我找到了出路，也许试试这个插件 https://masonry.desandro.com/

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

使用带有jquery的masonry插件

$('.grid').masonry({
 // options
 itemSelector: '.grid-item',
});

使用带有普通js的砌体插件

var elem = document.querySelector('.grid');
var msnry = new Masonry( elem, {
  // options
  itemSelector: '.grid-item',
});

你需要做的就是

堆栈引导列垂直

3 个答案: