当文本太大时,Bootstrap会中断网格

时间:2016-08-22 17:43:41

标签: css twitter-bootstrap line-breaks

我正在使用bootstrap,并根据访问者正在使用的设备显示了几个项目。 基本上我有一个标题,图像和文字,我发现当文本比其他文本更长时,网格断开,其中一个项目以新的一行开始。

enter image description here

这是我的代码:

<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(项目)的高度相等所以它不会破坏?还是有另一种解决办法吗?

由于

1 个答案:

答案 0 :(得分: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。