2

Tengo 4 <ul> las cuales tienen contenido disparejo, estoy tratando ha ajustar las 4 listas a un solo tamaño introducir la descripción de la imagen aquí

codigo html de la pagina y los estilos que le estoy agregando

#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;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div id="web-dev" class="tab-pane fade in clearfix active">
  <h4 class="margtop20">Enlace su empresa a la web con nuestro servicio de desarrollo.</h4>

  <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
    <div class="sngl_pricing">
      <h2 class="title_price p_b_color">Inicial</h2>

      <ul>
        <li>Plantilla Personalizada</li>
        <li>Hasta 3 páginas para contenido</li>
        <li>Nombre de dominio</li>
        <li>1000mb de hospedaje</li>
        <li>Integración de redes Sociales</li>
        <li>Responsive Design</li>
        <li>Formulario de Contacto</li>
        <li>Mantenimiento y Administración</li>
        <li>Publicación y Registro de la Web</li>
        <li>Correo Corporativo</li>
        <li>Publicación En Español</li>

        <li><a href="" class="margtopboton btn pricing_btn" data-toggle="modal" data-target="#p-i-form">Solicitar</a></li>
      </ul>
    </div>
  </div>

  <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
    <div class="sngl_pricing">
      <h2 class="title_price p_b_color">Empresarial</h2>
      <ul>
        <li>Plantillas Personalizadas.</li>
        <li>8 páginas para contenido.</li>
        <li>Modulo de Registro.</li>
        <li>Nombre de dominio .com.ve</li>
        <li>2000mb de hospedaje.</li>
        <li>Integración de redes Sociales.</li>
        <li>Responsive Design.</li>
        <li>Formulario de Contacto.</li>
        <li>Mantenimiento y Administración.</li>
        <li>Publicación y Registro de la Web.</li>
        <li>Correo Corporativo.</li>
        <li>Autoadministrable.</li>
        <li>Publicación en Español.</li>
        <li><a href="" class="btn pricing_btn" data-toggle="modal" data-target="#p-e-form">Solicitar</a></li>

      </ul>
    </div>
  </div>
  <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
    <div class="sngl_pricing">
      <h2 class="title_price p_b_color">Profesional</h2>

      <ul>
        <li>Plantillas Personalizadas.</li>
        <li>Multiples páginas para contenido</li>
        <li>Modulo administrativo y registro</li>
        <li>Nombre de dominio .com.ve</li>
        <li>3000mb de hospedaje</li>
        <li>Integración de redes Sociales</li>
        <li>Responsive Design</li>
        <li>Formulario de Contacto.</li>
        <li>Mantenimiento y Administración.</li>
        <li>Publicación y Registro de la Web.</li>
        <li>Correo Corporativo.</li>
        <li>Autoadministrable.</li>
        <li>Publicación En Ingles y Español.</li>
        <li><a href="" class="btn pricing_btn" data-toggle="modal" data-target="#p-p-form">Solicitar</a></li>
      </ul>
    </div>
  </div>
  <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
    <div class="sngl_pricing ecommerce">
      <h2 class="title_price ecommerce">E-commerse</h2>
      <ul>
        <li>Plantillas Personalizadas.</li>
        <li> Sin limite de Productos.</li>
        <!-- <li>Modulo de Registro de Usuarios.</li> -->
        <li>Nombre de dominio .com.ve</li>
        <li>3000mb de hospedaje.</li>
        <li>Integración de redes Sociales.</li>
        <li>Responsive Design.</li>
        <li>Mantenimiento y Administración.</li>
        <li>Publicación y Registro de la Web.</li>
        <li>Correo Corporativo.</li>
        <li>Autoadministrable.</li>
        <li>Publicación en Español.</li>
        <li><a href="#" class="btn pricing_btn" data-toggle="modal" data-target="#model-web">Solicitar</a></li>

      </ul>
    </div>
  </div>

</div>
<!-- // WEB-DEV -->

7
  • 1
    No me queda muy claro que deseas hacer. ¿Quieres que las cuatro listas tengan el mismo tamaño vertical?
    – lk2_89
    Commented el 20 mar. 2019 a las 12:53
  • Podrías definir un tamaño especifico para la fila, o ayudarte de Flexbox para lograr lo que quieres; si puedes usar Bootstrap 4 esto sería mas sencillo en mi opinión
    – IvanS95
    Commented el 20 mar. 2019 a las 14:23
  • pero si estan una encima de la otra :v
    – Bryro
    Commented el 20 mar. 2019 a las 14:48
  • @lk2_89 me falto colocar ese detalle, si es que tengan el mismo heigth ,osea el mismo tamaño vertical.
    – J. Medina
    Commented el 20 mar. 2019 a las 17:45
  • @IvanS95 como seria en ese caso? porque el mayor inconveniente que tengo es que el boton solicitar este alineado uno con otro.
    – J. Medina
    Commented el 20 mar. 2019 a las 17:47

2 respuestas 2

2

Mira este ejemplo; aqui uso nada mas Flexbox, sin Bootstrap; agregue algunos estilos solo para diferenciar un poco pero puedes modificarlo segun necesites.

* {
  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>

El siguiente fragmento es utilizando componentes de Bootstrap unicamente; Bootstrap 4 te ofrece un componente llamdo Card Decks, que te permite agrupar tarjetas de igual altura sin importar su contenido; todas se ajustan a la mas alta.

<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>

El siguiente esta hecho a partir de columnas en Bootstrap 4 para que puedas modificar el espacio que quieres que ocupen en cada tamaño de pantalla; es necesario agregar unos cuantos estilos para que todo se comporte o se mire de la manera adecuada.

.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>

Dependiendo de tu proyecto; si no puedes utilizar Bootstrap 4, entonces tienes la primer solucion que usa Flexbox nada mas; asi puedes incluirlo en tu documento HTML sin mayores problemas. Sin embargo, si puedes cambiar a la version 4 de Bootstrap, creo que sus utilidades te pueden resultar de gran ayuda; ademas, Bootstrap 4 esta completamente hecho con base en Flexbox, por tanto todo lo que puedas aplicar a Flexbox, funciona en Bootstrap 4.

4
  • intente con flexbox, pero como no soy muy diestro, no logre colocarlo en bloques de pares al hacerce responsive como pasa con el col-md-6 utilice flex-raw. tratare con boots 4 a ver como logro modificar, gracias
    – J. Medina
    Commented el 21 mar. 2019 a las 12:01
  • Voy a incluir otro ejemplo usando columnas de Bootstrap 4; lo que quieres es que sean 2 columnas por fila? o como exactamente?
    – IvanS95
    Commented el 21 mar. 2019 a las 14:10
  • 1
    @J.Medina acabo de agregar un 3er fragmento que esta hecho a base de clases col-* para que puedas modificar el numero de columnas que necesites
    – IvanS95
    Commented el 21 mar. 2019 a las 15:17
  • muchas gracias por tu ayuda, se me hizo dificil el cambio a bootstrap 4 por razones de tiempo, pero cambiare los estilos apenas pueda a bootstrap, el flex me hizo las cosas un poco dificil porq tengo muy integrado b3 en el proyecto.
    – J. Medina
    Commented el 22 mar. 2019 a las 11:51
-1

Podrías definir una longitud para cada una utilizando 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>
3
  • 2
    Por favor no mandes saludos en las respuestas no es necesario
    – user75901
    Commented el 20 mar. 2019 a las 18:44
  • Amigo gracias por tu pronta respuesta, disculpe por no contestar mas rapido, realize la modificacion que me recomendo pero al colocar el height de esa manera ocurrio que el contenido de la pagina se desplazaba hacia arriba por debajo de las listas, imagino que se debera al float del bootstrap
    – J. Medina
    Commented el 21 mar. 2019 a las 11:56
  • 1
    @Eliseo por favor revisa: ¿Cuál es la conducta esperada de los usuarios? donde se aclara el porqué al enviar saludos en tus publicaciones estás creando ruido innecesariamente. Commented el 21 mar. 2019 a las 18:20

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.