Как выравнивать кнопки правильно в ту же высоту в boostrap

Я нуждаюсь в том, чтобы выровнять кнопки в ту же высоту, но есть тексты большие, чем другие и кажется мне невозможным. Какое решение было бы?

Я оставляю вам код:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="row">
  <div class="container tablaquehacemos">
    <div class="col-sm-12 col-md-6 col-lg-3">
      <div class="card text-xs-center">
        <img class="card-img-top img-fluid imagehacemos m-x-auto" src="images/iconotablet.jpg" alt="Card image cap">
        <div class="card-block turismo">
          <h4 class="card-title">TURISMO TECNOLOGICO Y CIENTIFICO</h4>
          <p class="card-text">¿Te apetecería descubrir tesoros ocultos, transportarte al pasado y sentirte como un arqueólogo gracias a las nuevas tecnologías?.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>
    <div class="col-sm-12 col-md-6 col-lg-3">
      <div class="card text-xs-center">
        <img class="card-img-top img-fluid imagehacemos m-x-auto" src="images/iconolapiz.jpg" alt="Card image cap">
        <div class="card-block didactica">
          <h4 class="card-title">DIDÁCTICA DEL PATRIMONIO</h4>
          <p class="card-text">Renovamos el concepto de taller pedagógico y de la visita cultural incluyendo en nuestras propuestas escolares el uso de tablets digitales para fomentar un uso didáctico y responsable de las nuevas tecnologías entre l@s alumn@s.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>

    </div>
    <div class="col-sm-12 col-md-6 col-lg-3">
      <div class="card text-xs-center">
        <img class="card-img-top img-fluid imagehacemos m-x-auto" src="images/iconoojo.png" alt="Card image cap">
        <div class="card-block culturales">
          <h4 class="card-title">PROYECTOS CULTURALES</h4>
          <p class="card-text">Una de nuestras señas de identidad es complementar cualquier tipo de actividad con la cultura, dotándole así de un componente enriquecedor para este tipo de actos.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>
    <div class="col-sm-12 col-md-6 col-lg-3">
      <div class="card text-xs-center">
        <img class="card-img-top img-fluid imagehacemos m-x-auto" src="images/iconolupa.png" alt="Card image cap">
        <div class="card-block arqueologia">
          <h4 class="card-title">ARQUEOLOGÍA</h4>
          <p class="card-text">Nos avalan más de 10 años en el mundo de la arqueología lo que nos hace profundos conocedores de la realidad del trabajo arqueológico y de su gestión.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>
  </div>
</div>
2
задан 21.02.2019, 20:47
2 ответа

Раздели тексты и кнопки на [двух 110] отличных, таким образом кнопки всегда будут выровнен и место верхних текстов всегда будет приспосабливаться к твоему самому длинному тексту.

1
ответ дан 03.12.2019, 20:05
  • 1
    это это попробовало, но он не подает меня, из-за которого в способе рабочий стол - вместе выровненные 4, в способе tablet 2 наверху и внизу выровненные 2, и в подвижном способе это один каждый, который является уникумом, который выходит у меня correctmente таково как дела прямо сейчас. –  alfonso Perez 04.10.2016, 23:57

Мне приходят в голову два выбора, с display:table или с flexbox, но нужно изменять немного поведение колонн Bootstrap.

display:table

div что содержит колонны, шло бы display:table и колонны display:table-cell, потом было бы нужно удалять float и posicionar кнопка абсолютной формы, выровненная внизу. Проблема состоит в том, что четыре колонны находятся в той же линии, и у тебя есть две или четыре колонны, как разрешение, осложнилось бы пробовать решать это.

.tablaquehacemos{
  display:table;
  }

.tablaquehacemos .col-md-6, .tablaquehacemos .col-lg-3{
  display:table-cell;
  float:none;
  }

.tablaquehacemos a.btn{
  position:absolute;
  bottom:-10px;
  }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="row">
  <div class="container tablaquehacemos">
    <div class="col-sm-12 col-md-6 col-lg-3">
      <div class="card text-xs-center">
        <img class="card-img-top img-fluid imagehacemos m-x-auto" src="images/iconotablet.jpg" alt="Card image cap">
        <div class="card-block turismo">
          <h4 class="card-title">TURISMO TECNOLOGICO Y CIENTIFICO</h4>
          <p class="card-text">¿Te apetecería descubrir tesoros ocul;tos, transportarte al pasado y sentirte como un arqueólogo gracias a las nuevas tecnologías?.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>
    <div class="col-sm-12 col-md-6 col-lg-3">
      <div class="card text-xs-center">
        <img class="card-img-top img-fluid imagehacemos m-x-auto" src="images/iconolapiz.jpg" alt="Card image cap">
        <div class="card-block didactica">
          <h4 class="card-title">DIDÁCTICA DEL PATRIMONIO</h4>
          <p class="card-text">Renovamos el concepto de taller pedagógico y de la visita cultural incluyendo en nuestras propuestas escolares el uso de tablets digitales para fomentar un uso didáctico y responsable de las nuevas tecnologías entre l@s alumn@s.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>

    </div>
    <div class="col-sm-12 col-md-6 col-lg-3">
      <div class="card text-xs-center">
        <img class="card-img-top img-fluid imagehacemos m-x-auto" src="images/iconoojo.png" alt="Card image cap">
        <div class="card-block culturales">
          <h4 class="card-title">PROYECTOS CULTURALES</h4>
          <p class="card-text">Una de nuestras señas de identidad es complementar cualquier tipo de actividad con la cultura, dotándole así de un componente enriquecedor para este tipo de actos.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>
    <div class="col-sm-12 col-md-6 col-lg-3">
      <div class="card text-xs-center">
        <img class="card-img-top img-fluid imagehacemos m-x-auto" src="images/iconolupa.png" alt="Card image cap">
        <div class="card-block arqueologia">
          <h4 class="card-title">ARQUEOLOGÍA</h4>
          <p class="card-text">Nos avalan más de 10 años en el mundo de la arqueología lo que nos hace profundos conocedores de la realidad del trabajo arqueológico y de su gestión.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>
  </div>
</div>

Flexbox

С flexbox он гораздо проще, display:flex в div что содержит колонны, flex-wrap:wrap для того, чтобы ящики упали, если нет места, posicionar кнопка внизу, и давать немного нижнего края для, когда будет две колонны:

.tablaquehacemos{
  display:flex;
  flex-wrap:wrap;
  }

.tablaquehacemos .col-md-6, .tablaquehacemos .col-lg-3{
  margin-bottom: 50px;
}
.tablaquehacemos a.btn{
  position:absolute;
  bottom:-30px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="row">
  <div class="container tablaquehacemos">
    <div class="col-sm-12 col-md-6 col-lg-3">
      <div class="card text-xs-center">
        <img class="card-img-top img-fluid imagehacemos m-x-auto" src="images/iconotablet.jpg" alt="Card image cap">
        <div class="card-block turismo">
          <h4 class="card-title">TURISMO TECNOLOGICO Y CIENTIFICO</h4>
          <p class="card-text">¿Te apetecería descubrir tesoros ocultos, transportarte al pasado y sentirte como un arqueólogo gracias a las nuevas tecnologías?.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>
    <div class="col-sm-12 col-md-6 col-lg-3">
      <div class="card text-xs-center">
        <img class="card-img-top img-fluid imagehacemos m-x-auto" src="images/iconolapiz.jpg" alt="Card image cap">
        <div class="card-block didactica">
          <h4 class="card-title">DIDÁCTICA DEL PATRIMONIO</h4>
          <p class="card-text">Renovamos el concepto de taller pedagógico y de la visita cultural incluyendo en nuestras propuestas escolares el uso de tablets digitales para fomentar un uso didáctico y responsable de las nuevas tecnologías entre l@s alumn@s.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>

    </div>
    <div class="col-sm-12 col-md-6 col-lg-3">
      <div class="card text-xs-center">
        <img class="card-img-top img-fluid imagehacemos m-x-auto" src="images/iconoojo.png" alt="Card image cap">
        <div class="card-block culturales">
          <h4 class="card-title">PROYECTOS CULTURALES</h4>
          <p class="card-text">Una de nuestras señas de identidad es complementar cualquier tipo de actividad con la cultura, dotándole así de un componente enriquecedor para este tipo de actos.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>
    <div class="col-sm-12 col-md-6 col-lg-3">
      <div class="card text-xs-center">
        <img class="card-img-top img-fluid imagehacemos m-x-auto" src="images/iconolupa.png" alt="Card image cap">
        <div class="card-block arqueologia">
          <h4 class="card-title">ARQUEOLOGÍA</h4>
          <p class="card-text">Nos avalan más de 10 años en el mundo de la arqueología lo que nos hace profundos conocedores de la realidad del trabajo arqueológico y de su gestión.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>
  </div>
</div>
3
ответ дан 03.12.2019, 20:05

Теги

Похожие вопросы