2016-08-22 5 views
1

私はbootstrapで作業しており、訪問者が使用しているデバイスに応じて表示する項目がいくつかあります。 基本的に私はタイトル、画像、テキストを持っていますが、テキストが他のものより長いときは、グリッドが壊れ、項目の1つが新しい行から始まることがわかります。ここでサイズが大きすぎると、ブートストラップでグリッドが壊れる

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

ブートストラップでは12列が連続して使用されます。私はそう

<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

+0

まで追加する方法:

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

またはこのような何か:あなたは24

例を持っているように見えます私がそれを言及しなかったならば、ごめんなさい。私は8つのアイテムを持っているので、私はちょうどcol-md-6を行ごとに2つ持っています。そしてそれが大きければ、行ごとに3つのアイテム(xl-4)を持ちます。また、XLはブートストラップ・ツイッター用のパッチであることに気づくでしょう。 – Gonzalo

関連する問題