<article> <header> <div class="container"> <div class="row is-table-row"> <div class="col-md-10 col-md-offset-1"> <h1>چند روش برای هم اندازه کردن ارتفاع ستون ها در بوتسرپ</h1> <a href="http://zagros.pro/" class="btn btn-lg btn-info">در زاگرس پرو بخوانید</a> <p class="note">این نمونه اولیه برای بررسی راه های حل مشکل هم ارتفاع نبودن ایجاد شده</p> </div> </div> </div> </header> <br /> <br /> <div class="big-buttons"> <div class="container"> <div class="row is-table-row"> <div class="col-sm-4"> <div class="box"> <h2>باکس اول</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad. adipisicing elit, sed do eiusmod tempor</p> <a href="#" class="btn btn-primary">لینک</a> </div> </div> <div class="col-sm-4"> <div class="box is-table-row"> <h2>باکس دوم</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p> <a href="#" class="btn btn-primary">لینک</a> </div> </div> <div class="col-sm-4"> <div class="box"> <h2>باکس سوم با عنوان طولانی تر نسبت به دیگر باکس ها</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad</p> <a href="#" class="btn btn-primary">لینک</a> </div> </div> </div> </div> </div> </article>
/* display: table استفاده از */ @media only screen and (min-width : 768px) { .is-table-row { display: table; } .is-table-row [class*="col-"] { float: none; display: table-cell; vertical-align: top; } } .is-table-row .box { background: none; position: static; } .is-table-row [class*="col-"] { background: #fff; } /* display: table - END */ body { background: #eee; padding: 50px 0 100px; -webkit-font-smoothing: antialiased; } a { transition: all 225ms ease; } header { margin-bottom: 25px; text-align: center; } .big-buttons { margin-bottom: 25px; } header h1 { font-weight: 400; } header .note { margin: 0; font-style: italic; max-width: 600px; margin: 55px auto 0; } .row { padding-top: 25px; padding-bottom: 25px; background: rgba(255, 255, 55, 0.3); } [class*="col-"] { border: solid 1px #e3e3e3; border-top-width: 2px; border-bottom-width: 2px; padding-top: 25px; padding-bottom: 25px; background: rgba(255, 25, 255, 0.5); } [class*="col-"]:first-child { border-left-width: 2px; } [class*="col-"]:last-child { border-right-width: 2px; } .box { padding: 25px 7% 0; text-align: center; position: relative; background: #fff; } .box h2 { font-weight: 300; letter-spacing: -0.05em; margin-bottom: 15px; } .box a { display: block; position: absolute; left: 0; bottom: 0; width: 100%; border-radius: 0; padding: 25px 0; } .box p { padding-bottom: 125px; font-size: 16px; font-weight: 300; opacity: 0.8; } .legend { position: fixed; top: 5px; right: 5px; text-align: center; border-radius: 3px; font-size: 12px; overflow: hidden; }