У меня есть 4
у которых есть неодинаковый контент, я обрабатываю информацию есть налаживать 4 списка в единственный размер
код html страницы и стилей, которые я добавляю ему
#planes {
padding-top: 47px;
background-color: rgba(208, 207, 207, 1);
}
.our_planes {
padding: 71px 0 78px;
background-color: #fff
}
span.separator {
border: 0;
border-top: 1px solid #999;
border-bottom: 1px solid #333;
height: 1px;
padding: 0;
}
ul li a.i1,
ul li a.i2 {
font-size: larger;
font-weight: 600;
}
ul li.active a.i1,
ul li.active a.i2 {
border: 1.5px solid #059279 !important;
border-bottom: #0000 !important;
}
.sngl_pricing ul {
/* border : #b4b4b4 solid 5px; */
margin: 0;
padding: 0;
transition: all 1s ease 0s;
-moz-transition: all 1s ease 0s;
-webkit-transition: all 1s ease 0s
}
@media {}
.sngl_pricing ul li {
color: #666666;
font-family: sans-serif;
font-size: 14px;
list-style: none outside none;
text-transform: capitalize;
/* border-top : 2px solid #b4b4b4; */
padding: 7px 0;
text-align: center;
font-weight: 550;
}
.sngl_pricing ul li:first-child {
border-top: 0;
}
.our_planes .nav-tabs {
border-bottom: 2px solid #105089;
}
.our_planes .nav-tabs>li {
margin-bottom: -2px;
}
.sngl_pricing {
text-align: center;
/* border : #b4b4b4 solid 5px; */
margin-bottom: 5px;
}
#web-dev .sngl_pricing:hover {
border: #03c5c3 solid 5px;
transition: all 1s ease 0s;
-moz-transition: all 1s ease 0s;
-webkit-transition: all 1s ease 0s
}
#social .sngl_pricing:hover {
border: #7303a9 solid 5px;
transition: all 1s ease 0s;
}
.sngl_pricing>h2 {
color: #fff;
font-size: 20px;
font-weight: 500;
margin: 0;
padding: 10px;
text-transform: uppercase;
/* background-color: #059279; */
/* background-image : url("../images/clean_code_bg.jpg"); */
}
.p_b_color {
background-image: linear-gradient(to right bottom, #032bc5, #0064e5, #008ae5, #00a9d3, #03c5c3);
background-color: none;
}
.s_b_color {
background-image: linear-gradient(to left bottom, #7303a9, #6512b0, #541cb7, #3c24be, #032bc5);
background-color: none;
}
div.ecommerce:hover {
border-color: #008000;
}
.sngl_pricing>h2.ecommerce {
background-color: #008000;
}
.title_bg_1 {
background-image: url("../img/basic.jpg");
ba;
ckground-position: center center;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.title_bg_2 {
background-image: url("../img/standar.jpg");
background-position: center center;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.title_bg_3 {
background-image: url("../img/extended.jpg");
background-position: center center;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.sngl_pricing>h3 {
background: none 0 0 repeat scroll #b4b4b4;
color: #515050;
font-size: 33px;
margin: 0;
padding: 20px 0;
}
.currency {
font-size: 18px;
position: relative;
top: -18px;
}
.monuth {
font-size: 24px;
text-transform: none;
}
.btn.pricing_btn {
background: none 0 0 repeat scroll #105089;
border: #666666 solid 1px;
color: #fff;
text-transform: uppercase;
padding: 10px 30px;
}
.sngl_pricing ul {
margin: 0;
padding: 24px 0;
}
.sngl_pricing a {
margin-top: 30px;
}
Enlace su empresa a la web con nuestro servicio de desarrollo.
Inicial
- Plantilla Personalizada
- Hasta 3 páginas para contenido
- Nombre de dominio
- 1000mb de hospedaje
- Integración de redes Sociales
- Responsive Design
- Formulario de Contacto
- Mantenimiento y Administración
- Publicación y Registro de la Web
- Correo Corporativo
- Publicación En Español
- Solicitar
Empresarial
- Plantillas Personalizadas.
- 8 páginas para contenido.
- Modulo de Registro.
- Nombre de dominio .com.ve
- 2000mb de hospedaje.
- Integración de redes Sociales.
- Responsive Design.
- Formulario de Contacto.
- Mantenimiento y Administración.
- Publicación y Registro de la Web.
- Correo Corporativo.
- Autoadministrable.
- Publicación en Español.
- Solicitar
Profesional
- Plantillas Personalizadas.
- Multiples páginas para contenido
- Modulo administrativo y registro
- Nombre de dominio .com.ve
- 3000mb de hospedaje
- Integración de redes Sociales
- Responsive Design
- Formulario de Contacto.
- Mantenimiento y Administración.
- Publicación y Registro de la Web.
- Correo Corporativo.
- Autoadministrable.
- Publicación En Ingles y Español.
- Solicitar
E-commerse
- Plantillas Personalizadas.
- Sin limite de Productos.
- Nombre de dominio .com.ve
- 3000mb de hospedaje.
- Integración de redes Sociales.
- Responsive Design.
- Mantenimiento y Administración.
- Publicación y Registro de la Web.
- Correo Corporativo.
- Autoadministrable.
- Publicación en Español.
- Solicitar
Смотри этот пример; здесь я использую совсем не больше Flexbox , без Bootstrap; добавьте какие-то стили только чтобы отличаться немного, но ты можешь изменять это, как ты нуждался.
* {
box-sizing: border-box
}
.flex-container {
display: flex;
align-items: stretch;
flex: 1;
min-height: 450px;
width: 100%;
}
.flex-item {
border: 1px solid grey;
display: flex;
flex-direction: column;
flex: 1;
margin: 0 5px;
}
.flex-item header {
background-color: lightblue;
color: white;
padding: 15px;
text-align: center;
}
.flex-item .body {
flex-grow: 1;
padding: 15px;
}
.flex-item .action {
padding: 15px;
text-align: center;
}
<div class="flex-container">
<div class="flex-item">
<header>Item 1</header>
<div class="body">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa inventore impedit, cum asperiores sequi ab corporis, hic dignissimos magni laborum fugit dolores quibusdam, similique sint odit delectus porro. Ea est odio laborum eligendi, exercitationem
voluptatem doloremque alias, molestiae rerum reprehenderit inventore, fugiat itaque? Quaerat blanditiis, r
</div>
<div class="action">
<button>Solicitar</button>
</div>
</div>
<div class="flex-item">
<header>Item 2</header>
<div class="body">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa inventore impedit, cum asperiores sequi ab corporis, hic dignissimos magni laborum fugit dolores quibusdam, similique sint odit delectus porro. Ea est odio laborum eligendi, exercitationem
voluptatem doloremque alias, molestiae rerum reprehenderit inventore, fugiat itaque? Quaerat blanditiis, r
</div>
<div class="action">
<button>Solicitar</button>
</div>
</div>
<div class="flex-item">
<header>Item 3</header>
<div class="body">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa inventore impedit, cum asperiores sequi ab corporis, hic dignissimos magni laborum fugit dolores quibusdam, similique sint odit delectus porro. Ea est odio laborum eligendi, exercitationem
voluptatem doloremque alias, molestiae rerum reprehenderit inventore, fugiat itaque? Quaerat blanditiis, repellendus omnis harum asperiores voluptate!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa inventore impedit, cum asperiores sequi ab corporis, hic dignissimos magni laborum fugit dolores quibusdam, similique sint odit delectus porro. Ea est odio laborum eligendi, exercitationem
voluptatem doloremque alias, molestiae rerum reprehenderit inventore, fugiat itaque? Quaerat blanditiis, repellendus omnis harum asperiores voluptate!
</p>
</div>
<div class="action">
<button>Solicitar</button>
</div>
</div>
<div class="flex-item">
<header>Item 4</header>
<div class="body">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa inventore impedit, cum asperiores sequi ab corporis, hic dignissimos magni laborum fugit dolores quibusdam, similique sint odit delectus porro. Ea est odio laborum eligendi, exercitationem
voluptatem doloremque alias, molestiae rerum reprehenderit inventore, fugiat itaque? Quaerat blanditiis, repellendus omnis harum asperiores voluptate!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa inventore impedit, cum asperiores sequi ab corporis, hic dignissimos magni laborum fugit dolores quibusdam, similique sint odit delectus porro. Ea est odio laborum eligendi, exercitationem
voluptatem doloremque alias, molestiae rerum reprehenderit inventore, fugiat itaque? Quaerat blanditiis, repellendus omnis harum asperiores voluptate!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa inventore impedit, cum asperiores sequi ab corporis, hic dignissimos magni laborum fugit dolores quibusdam, similique sint odit delectus porro. Ea est odio laborum eligendi, exercitationem
voluptatem doloremque alias, molestiae rerum reprehenderit inventore, fugiat itaque? Quaerat blanditiis, repellendus omnis harum asperiores voluptate!
</p>
</div>
<div class="action">
<button>Solicitar</button>
</div>
</div>
</div>
Следующий фрагмент - используя компоненты Bootstrap только; Bootstrap 4 предлагает тебе компонент llamdo Кард Деккс , которые он позволяет тебе группировать карточки равной высоты, не импортируя Вашего контента; все приспосабливаются к самой высокой.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="card-deck">
<div class="card">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<button class="btn btn-success d-block mx-auto">Solicitar</button>
</div>
</div>
<div class="card">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action. This card has even longer content than the first to show that equal height action.
This card has even longer content than the first to show that equal height action.
</p>
</div>
<div class="card-footer">
<button class="btn btn-success d-block mx-auto">Solicitar</button>
</div>
</div>
<div class="card">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
<div class="card-footer">
<button class="btn btn-success d-block mx-auto">Solicitar</button>
</div>
</div>
<div class="card">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
<div class="card-footer">
<button class="btn btn-success d-block mx-auto">Solicitar</button>
</div>
</div>
</div>
Следующий сделан начиная с колонны в Bootstrap 4 для того, чтобы ты смог изменять место, которое ты хочешь, чтобы они заняли в каждый tamaГ±o экрана; необходимо добавлять несколько стилей для того, чтобы все вело себя или смотрелось подходящим способом.
.item-container {
min-height: 450px;
border: 1px solid grey;
height: 100%;
}
.item-container .body {
flex-grow: 1;
padding: 15px 25px;
}
.item-container .action {
padding: 15px;
}
header {
background-color: skyblue;
padding: 15px;
color: #FFF;
font-weight: bold;
text-align: center;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row align-items-stretch">
<div class="col-6 col-md-3">
<div class="item-container d-flex flex-column">
<header>Item 1</header>
<div class="body"></div>
<div class="action">
<button class="btn btn-success d-block mx-auto">Solicitar</button>
</div>
</div>
</div>
<div class="col-6 col-md-3">
<div class="item-container d-flex flex-column">
<header>Item 2</header>
<div class="body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut laboriosam repudiandae dolore animi? Aliquid facere similique rerum iste placeat debitis asperiores enim ipsum maxime impedit sequi illum odit quas laborum ad deserunt nobis quae
saepe totam molestias, eius, veniam dignissimos pariatur? Veniam sunt illo, in voluptas iste tempore. Libero, error facilis! Odit itaque placeat voluptate perferendis deserunt aliquid quidem accusamus laudantium amet cumque, inventore est
corporis excepturi. Debitis minus recusandae perferendis facilis. Ducimus eveniet iste laboriosam doloremque dolore consequatur exercitationem. Aliquam dolore sit repellat rerum!</p>
</div>
<div class="action">
<button class="btn btn-success d-block mx-auto">Solicitar</button>
</div>
</div>
</div>
<div class="col-6 col-md-3">
<div class="item-container d-flex flex-column">
<header>Item 3</header>
<div class="body">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nemo, nihil beatae dignissimos nesciunt quo ipsam non reiciendis eligendi. Nesciunt optio incidunt sit, fugiat voluptatum debitis quae sequi iusto! Perferendis, quia vel quaerat in praesentium
iure nam esse impedit necessitatibus maxime error tempora optio maiores nisi, veniam magnam quo iste voluptas quis rem, minus animi eum. Alias dolorem deserunt amet a nulla. Atque dolor cumque nam voluptates molestias! Deleniti quos eum molestiae
eos, voluptatibus earum alias iusto in itaque vero veniam quidem architecto! Sint ducimus itaque deserunt, doloribus sunt consequatur assumenda vel tenetur error placeat harum, dicta eaque! Labore, vel eos!</p>
</div>
<div class="action">
<button class="btn btn-success d-block mx-auto">Solicitar</button>
</div>
</div>
</div>
<div class="col-6 col-md-3">
<div class="item-container d-flex flex-column">
<header>Item 4</header>
<div class="body">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias officia magni repellendus nobis similique dolor minima ipsa vero libero temporibus inventore, itaque recusandae optio veniam ipsam explicabo delectus officiis maxime provident impedit
blanditiis incidunt enim atque! Porro alias quod incidunt recusandae quibusdam. Porro repellat nulla vero magni eius libero inventore distinctio esse iste quam quis, aspernatur eveniet sapiente repudiandae nihil reiciendis autem! Iusto sit
quod sed laudantium perspiciatis dicta praesentium eaque voluptatibus, sint debitis eveniet architecto magnam ipsam, animi explicabo possimus illo libero earum maiores error corrupti adipisci aspernatur quo. Laboriosam impedit ex fuga ab ipsum
modi nemo temporibus, eius numquam laborum exercitationem. Quae pariatur qui sit temporibus voluptatibus, iste quaerat similique optio, velit rem, doloribus non ratione! Eaque, rem!</p>
</div>
<div class="action">
<button class="btn btn-success d-block mx-auto">Solicitar</button>
</div>
</div>
</div>
</div>
</div>
в зависимости от твоего проекта; если ты не можешь использовать Bootstrap 4, тогда у тебя есть она первый решение, которое использует Flexbox больше ничто; так ты это можешь включать в твой документ HTML без больших проблем. Однако, если ты можешь менять в версию 4 из Bootstrap, я думаю, что Ваши прибыли могут следовать тебе из большой помощи; кроме того, Bootstrap 4 полностью сделан с основанием в Flexbox, следовательно все то, что ты мог бы применять к Flexbox, функционирует в Bootstrap 4.
PodrГ-схвати определять длину для каждой используя vh.
p.e:
<div style="height: 50vh; position: relative;">
<div>
Todo el contenido aquí
</div>
<div style="padding: 10px; position: absolute; bottom: 0;">
<button></button>
</div>
</div>
height
таким образом случилось, что контент страницы был прокручен вверх под списками, я представляю, что он проистечет float bootstrap
– J. Medina
21.03.2019, 13:56
col-md-6
используйтеflex-raw
. я отнесусь с boots к 4, чтобы видеть достижением изменять, спасибо – J. Medina 21.03.2019, 14:01col-*
для того, чтобы ты смог изменять число колонн, в которых ты нуждался бы – IvanS95 21.03.2019, 17:17