Предотвращение заполнения кнопки Bootstrap на flexbox

Я добавил классы d-flex и flex-column в класс Bootstrap card-body, чтобы выровнять содержащуюся кнопку по нижней части карты, как предлагается в верхнем ответе этот вопрос. Моя проблема в том, что это привело к тому, что кнопка расширилась, чтобы заполнить карточку. Как я могу заставить кнопку вернуться к сжатию, чтобы соответствовать тексту кнопки, как это было до того, как я добавил классы гибкости?

...
<div class = "row pt-4" id = "cards">
  <div class = "card-deck">

    // THIS IS THE CARD WITH THE WIDENED BUTTON
    <div class = "card">
      <img class = "card-img-top img-fluid" src = "{{url_for('static', filename='volunteer.png')}}" alt = "exercise_image" >
      <div class = "card-body d-flex flex-column">
        <h5 class = "card-title">Giving Back</h5>
        <p class = "card-text">Help others and feel useful</p>
        <a href = "#" class = "btn btn-primary mt-auto">Set a Goal</a>
      </div>
    </div>

    // THIS CARD'S BUTTON SHRINKS TO FIT ITS TEXT
    <div class = "card">
      <img class = "card-img-top img-fluid" src = "{{url_for('static', filename='spirituality.png')}}" alt = "exercise_image" >
      <div class = "card-body">
        <h5 class = "card-title">Spirituality</h5>
        <p class = "card-text">Connect to something larger than yourself</p>
        <a href = "#" class = "btn btn-primary">Set a Goal</a>
      </div>
    </div>

    ...

  </div>
</div>
...

Вот как выглядят кнопки: Предотвращение заполнения кнопки Bootstrap на flexbox

Выглядит хорошо, и на что еще можно нажать. Оставь это, если можешь.

— 16.06.2018 07:48

Спасибо @wazz. Это хороший момент, поэтому я оставлю все как есть.

— 16.06.2018 15:35

css twitter-bootstrap flexbox

16.06.2018 06:53

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

4 531

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Просто оберните свой якорь в другой div

<div>
    <a href = "#" class = "btn btn-primary mt-auto">Set a Goal</a>
</div>

<!DOCTYPE html>
<html lang = "en">

<head>
  <title>Bootstrap Example</title>
  <meta charset = "utf-8">
  <meta name = "viewport" content = "width=device-width, initial-scale=1">
  <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>

<body>
  <div class = "container">
    <div class = "row pt-4" id = "cards">
      <div class = "card-deck">
        <div class = "card">
          <img class = "card-img-top img-fluid" src = "{{url_for('static', filename='volunteer.png')}}" alt = "exercise_image">
          <div class = "card-body d-flex flex-column">
            <h5 class = "card-title">Giving Back</h5>
            <p class = "card-text">Help others and feel useful</p>
            <div>
              <a href = "#" class = "btn btn-primary mt-auto">Set a Goal</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

ИЛИ ЖЕ Просто добавьте класс align-items-center в гибкий div

<!DOCTYPE html>
<html lang = "en">

<head>
  <title>Bootstrap Example</title>
  <meta charset = "utf-8">
  <meta name = "viewport" content = "width=device-width, initial-scale=1">
  <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>

<body>
  <div class = "container">
    <div class = "row pt-4" id = "cards">
      <div class = "card-deck">
        <div class = "card">
          <img class = "card-img-top img-fluid" src = "{{url_for('static', filename='volunteer.png')}}" alt = "exercise_image">
          <div class = "card-body d-flex flex-column align-items-center">
            <h5 class = "card-title">Giving Back</h5>
            <p class = "card-text">Help others and feel useful</p>
              <a href = "#" class = "btn btn-primary mt-auto">Set a Goal</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

Спасибо @Nandita. Добавление align-items-center в класс устранило проблему ширины и оставило кнопку выровненной по нижнему краю. С другой стороны, добавление div устранило проблему ширины, но удалило выравнивание по низу.

— 16.06.2018 15:32

Не могли бы вы объяснить, почему каждая из ваших рекомендаций помогает решить проблему ширины?

— 16.06.2018 15:33

ОК. Я не знал, что будет вашим требованием, поэтому добавил оба ответа :)

— 16.06.2018 15:33

по умолчанию значение свойства align-items равно 'stretch', которое растягивает каждый дочерний элемент flex до полной ширины родительского элемента flex. Таким образом, добавление align-items: center больше не растягивает кнопку

— 16.06.2018 15:35

Добавление div к кнопке делает кнопку больше не прямым потомком гибкого элемента, поэтому это не повлияет на него. Теперь div, оборачивающий кнопку, займет всю ширину, но кнопка будет иметь ширину только в соответствии с содержимым внутри нее :)

— 16.06.2018 15:36

16.06.2018 09:04

К классу кнопок добавьте mx-auto для центрирования кнопки и mt-auto для нажатия кнопки в нижней части карты.

<!DOCTYPE html>
<html lang = "en">

<head>
  <title>Bootstrap Example</title>
  <meta charset = "utf-8">
  <meta name = "viewport" content = "width=device-width, initial-scale=1">
  <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>

<body>
  <div class = "container">
    <div class = "row pt-4" id = "cards">
      <div class = "card-deck">
        <div class = "card">
          <img class = "card-img-top img-fluid" src = "{{url_for('static', filename='volunteer.png')}}" alt = "exercise_image">
          <div class = "card-body d-flex flex-column align-items-center">
            <h5 class = "card-title">Giving Back</h5>
            <p class = "card-text">Help others and feel useful</p>
              <a href = "#" class = "btn btn-primary mt-auto mx-auto">Set a Goal</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

09.07.2020 14:39

Другие вопросы по теме

Почему ввод BootStrap TokenField не передается в запросе POST?

Как установить флажок выравнивания по левому краю в div группы ввода?

Bootstrap 4 - Как добавить несколько заголовков с несколькими столбцами для каждого заголовка?

Свяжите bootstrap в WordPress на веб-хостинге

HTML отображается неправильно? (пакет laravel-dompdf)

Вручную изменить ширину носителя, используемого для печати

Модальная форма начальной загрузки не отправлена

Bootstrap 4 Адаптивное меню - добавлять элементы при свертывании

Bootstrap - настраиваемые оповещения с индикатором выполнения

Можно ли использовать jQuery в React только для раскрывающегося списка Bootstrap?

Предотвращение заполнения кнопки Bootstrap на flexbox

Ответы 2

Другие вопросы по теме

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