css - 当文本太大时，Bootstrap 会破坏网格

Question

我正在使用 bootstrap 并有几个元素要显示，我将根据访问者使用的设备显示这些元素。基本上我有一个标题、图像和文本，我发现当文本比其他文本长时，网格会中断并且其中一个元素会在新行中开始。

这是我的代码:

<div class="row">
  <div class="col-md-6 col-xl-4">
        <h2 class="text-center">See when invoices are opened</h2>
        <img class="img-responsive center-block" src="invoice-.jpg"/>
        <p>See exactly when your invoices are sent viewed and paid. Easily add late payment fees to encourage your clients to pay on time.</p>
    </div>
    <div class="col-md-6 col-xl-4">
        <h2 class="text-center">Process discounts and refunds</h2>
        <img class="img-responsive center-block" src="discounts-and-refunds.jpg"/>
        <p>Add discounts to your invoices so your customers know they're getting a great deal. Process refunds and return with ease.</p>
    </div>
    <div class="col-md-6 col-xl-4">
        <h2 class="text-center">Add sales taxes to your invoices</h2>
        <img class="img-responsive center-block" src="sales-taxes.jpg"/>
        <p>Do you sell in multiple states or countries? Create as many sales tax rates as you want, and will automatically add them to your invoices based on your customers' locations.</p>
    </div>
    <div class="col-md-6 col-xl-offset-4 col-xl-4">
        <h2 class="text-center">Decide how and when to get paid</h2>
        <img class="img-responsive center-block" src="methods-and-terms.jpg"/>
        <p>Select custom payment terms for each client, such as Net 30 for Bob and Net 15 for Pam. Lets you choose different payment methods for each client, such as credit cards for Pam and checks for Bob.</p>
    </div>
</div>

有没有办法让每个 div(元素)的高度保持相等，这样它就不会中断？或者还有其他修复方法吗？

谢谢

Answer 1

Bootstrap 在一行中使用 12 列。看起来你有 24 个。

例子:

<div class="row">
  <div class="col-md-6>
    <p>Some Content</p>
  </div>
  <div class="col-md-6">
    <p>Some Content</p>
  </div>
</div>

或者像这样:

<div class="row">
  <div class="col-md-3">
    <p>Some Content</p>
  </div>
  <div class="col-md-3">
    <p>Some Content</p>
  </div>
  <div class="col-md-3">
    <p>Some Content</p>
  </div>
  <div class="col-md-3">
    <p>Some Content</p>
  </div>
</div>

注意行中的所有数字加起来是 12。