css - Bootstrap 列定价表 UI 问题

Question

这是我的 HTML Bootstrap 代码:

<div class="container">
         <div class="row db-padding-btm db-attached">
            <div class="col-xs-12 col-sm-3 col-md-3">
               <div class="db-wrapper"> 
                  <div class="db-pricing-eleven db-bk-color-one">
                     <div class="price">
                        <sup>$</sup>99
                        <small>per quarter</small>
                     </div>
                     <div class="type">
                        BASIC PLAN
                     </div>
                     <ul>
                        <li><i class="glyphicon glyphicon-print"></i>30+ Accounts </li>
                        <li><i class="glyphicon glyphicon-time"></i>150+ Projects </li>
                        <li><i class="glyphicon glyphicon-trash"></i>Lead Required</li>
                     </ul>
                     <div class="pricing-footer">
                        <a href="#" class="btn db-button-color-square btn-lg">BOOK ORDER</a>
                     </div>
                  </div>
               </div>
            </div>
            <div class="col-xs-12 col-sm-3 col-md-3">
               <div class="db-wrapper">
                  <div class="db-pricing-eleven db-bk-color-two popular">
                     <div class="price">
                        <sup>$</sup>199
                        <small>per quarter</small>
                     </div>
                     <div class="type">
                        MEDIUM PLAN
                     </div>
                     <ul>
                        <li><i class="glyphicon glyphicon-print"></i>30+ Accounts </li>
                        <li><i class="glyphicon glyphicon-time"></i>150+ Projects </li>
                        <li><i class="glyphicon glyphicon-trash"></i>Lead Required</li>
                     </ul>
                     <div class="pricing-footer">
                        <a href="#" class="btn db-button-color-square btn-lg">BOOK ORDER</a>
                     </div>
                  </div>
               </div>
            </div>
            <div class="col-xs-12 col-sm-3 col-md-3">
               <div class="db-wrapper">
                  <div class="db-pricing-eleven db-bk-color-three">
                     <div class="price">
                        <sup>$</sup>249
                        <small>per quarter</small>
                     </div>
                     <div class="type">
                        ADVANCE PLAN
                     </div>
                     <ul>
                        <li><i class="glyphicon glyphicon-print"></i>30+ Accounts </li>
                        <li><i class="glyphicon glyphicon-time"></i>150+ Projects </li>
                        <li><i class="glyphicon glyphicon-trash"></i>Lead Required</li>
                     </ul>
                     <div class="pricing-footer">
                        <a href="#" class="btn db-button-color-square btn-lg">BOOK ORDER</a>
                     </div>
                  </div>
               </div>
            </div>
            <!-- <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
               <div class="db-wrapper">
                  <div class="db-pricing-eleven db-bk-color-six">
                     <div class="price">
                        <sup>$</sup>599
                        <small>per quarter</small>
                     </div>
                     <div class="type">
                        EXTENDED PLAN
                     </div>
                     <ul>
                        <li><i class="glyphicon glyphicon-print"></i>30+ Accounts </li>
                        <li><i class="glyphicon glyphicon-time"></i>150+ Projects </li>
                        <li><i class="glyphicon glyphicon-trash"></i>Lead Required</li>
                     </ul>
                     <div class="pricing-footer">
                        <a href="#" class="btn db-button-color-square btn-lg">BOOK ORDER</a>
                     </div>
                  </div>
               </div>
            </div> -->
         </div>
         <!-- <div class="row db-padding-btm db-attached">
            <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
                <div class="db-wrapper">
                    <div class="db-pricing-eleven db-bk-color-one">
                        <div class="price">
                            <sup>$</sup>99
                                <small>per quarter</small>
                        </div>
                        <div class="type">
                            SMALL PLAN
                        </div>
                        <ul>

                            <li><i class="glyphicon glyphicon-print"></i>30+ Accounts </li>
                            <li><i class="glyphicon glyphicon-time"></i>150+ Projects </li>
                            <li><i class="glyphicon glyphicon-trash"></i>Lead Required</li>
                        </ul>
                        <div class="pricing-footer">

                            <a href="#" class="btn db-button-color-square btn-lg">BOOK ORDER</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
                 <div class="db-wrapper">
                <div class="db-pricing-eleven db-bk-color-two popular">
                    <div class="price">
                        <sup>$</sup>159
                                <small>per quarter</small>
                    </div>
                    <div class="type">
                        MEDIUM PLAN
                    </div>
                    <ul>

                        <li><i class="glyphicon glyphicon-print"></i>30+ Accounts </li>
                        <li><i class="glyphicon glyphicon-time"></i>150+ Projects </li>
                        <li><i class="glyphicon glyphicon-trash"></i>Lead Required</li>
                    </ul>
                    <div class="pricing-footer">

                        <a href="#" class="btn db-button-color-square btn-lg">BOOK ORDER</a>
                    </div>
                </div>
                     </div>
            </div>
            <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
                 <div class="db-wrapper">
                <div class="db-pricing-eleven db-bk-color-three">
                    <div class="price">
                        <sup>$</sup>799
                                <small>per quarter</small>
                    </div>
                    <div class="type">
                        ADVANCE PLAN
                    </div>
                    <ul>

                        <li><i class="glyphicon glyphicon-print"></i>30+ Accounts </li>
                        <li><i class="glyphicon glyphicon-time"></i>150+ Projects </li>
                        <li><i class="glyphicon glyphicon-trash"></i>Lead Required</li>
                    </ul>
                    <div class="pricing-footer">

                        <a href="#" class="btn db-button-color-square btn-lg">BOOK ORDER</a>
                    </div>
                </div>
                     </div>
            </div>

            </div> -->
      </div>

这是我的CSS:

/*============================================================
BACKGROUND COLORS
============================================================*/
.db-bk-color-one {
    background-color: #f55039;
}

.db-bk-color-two {
    background-color: #46A6F7;
}

.db-bk-color-three {
    background-color: #47887E;
}

.db-bk-color-six {
    background-color: #F59B24;
}
/*============================================================
PRICING STYLES
==========================================================*/
.db-padding-btm {
    padding-bottom: 50px;
}
.db-button-color-square {
    color: #fff;
    background-color: rgba(0, 0, 0, 0.50);
    border: none;
    border-radius: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
}

    .db-button-color-square:hover {
        color: #fff;
        background-color: rgba(0, 0, 0, 0.50);
        border: none;
    }


.db-pricing-eleven {
    margin-bottom: 30px;
    margin-top: 50px;
    text-align: center;
    box-shadow: 0 0 5px rgba(0, 0, 0, .5);
    color: #fff;
    line-height: 30px;
}

    .db-pricing-eleven ul {
        list-style: none;
        margin: 0;
        text-align: center;
        padding-left: 0px;
    }

        .db-pricing-eleven ul li {
            padding-top: 20px;
            padding-bottom: 20px;
            cursor: pointer;
        }

            .db-pricing-eleven ul li i {
                margin-right: 5px;
            }


    .db-pricing-eleven .price {
        background-color: rgba(0, 0, 0, 0.5);
        padding: 40px 20px 20px 20px;
        font-size: 60px;
        font-weight: 900;
        color: #FFFFFF;
    }

        .db-pricing-eleven .price small {
            color: #B8B8B8;
            display: block;
            font-size: 12px;
            margin-top: 22px;
        }

    .db-pricing-eleven .type {
        background-color: #52E89E;
        padding: 50px 20px;
        font-weight: 900;
        text-transform: uppercase;
        font-size: 30px;
    }

    .db-pricing-eleven .pricing-footer {
        padding: 20px;
    }

.db-attached > .col-lg-4,
.db-attached > .col-lg-3,
.db-attached > .col-md-4,
.db-attached > .col-md-3,
.db-attached > .col-sm-4,
.db-attached > .col-sm-3 {
    padding-left: 0;
    padding-right: 0;
}

.db-pricing-eleven.popular {
    margin-top: 10px;
}

    .db-pricing-eleven.popular .price {
        padding-top: 80px;
    }

我附上了我想要设计的图像。由于我是 bootstrap 专栏的新手，我在对齐表格时遇到了问题，如所附图片所示。我还需要对移动设备和平板电脑做出响应。

我只希望代码在 bootstrap-html 中，因为我的整个网站都只在 bootstrap 中。

任何人都可以帮助我如何使它成为可能吗？

感谢您的帮助。谢谢

Answer 1

可能使用flexbox，示例结构，已经在Bootstrap4中使用flexbox

<div class="container">
  <div class="item"></div>
  <div class="item active"></div>
  <div class="item"></div>
</div>

.container {
  display: flex;
  height: 400px;
  margin: 50px;
}

.item {
  min-width: 33.33%;
  background: blue;
}

.item.active {
  margin-top: -40px;
  margin-bottom: -40px;
  background: red;
  border-radius: 10px;
}

现场演示 - https://jsfiddle.net/tk8h81gw/