Bootstrap Колонка Ценообразование Таблица UI Выпуск

Вот мой HTML-код Bootstrap:Bootstrap Колонка Ценообразование Таблица UI Выпуск

<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-html, так как весь мой сайт находится в бутстрапе.

Может ли кто-нибудь помочь мне, как я могу это сделать?

Помощь ценится. Благодаря

источник

2017-01-26 Himanshu Chawla

Изображение дизайн, который я хочу сделать из приведенной выше ценовой таблице код. –

Может использовать 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/

источник

2017-01-26 22:09:20 grinmax

Спасибо @grinmax. Я уверен, что это поможет мне. –

@HimanshuChawla приветствуется) – grinmax

не работает. Я использовал его с boostrap и вставил свой контент, и теперь размер проблемы. –

Bootstrap Колонка Ценообразование Таблица UI Выпуск

ответ

Смежные вопросы