#html #css #button #sass
Вопрос:
Уведомление(в мобильной компоновке): Обе кнопки имеют одинаковую высоту. Высота определяется кнопкой с длинным названием. И текст в первой кнопке центрирован по вертикали и горизонтали.
Уведомление(в компоновке рабочего стола): Обе кнопки имеют одинаковую ширину. Ширина определяется кнопкой ширина с длинным именем. Это означает, что кнопки не должны занимать по 50% экрана каждая. И текст в первой кнопке расположен по центру. Кроме того, две кнопки расположены по центру с некоторым промежутком между ними.
У меня есть две кнопки рядом друг с другом, как показано в приведенном ниже коде:
.my-buttons {
display: flex;
justify-content: center;
button {
cursor: pointer;
}
}
<div class="my-buttons">
<button type="button" class="btn btn-outline-primary">
1st Button
</button>
<button type="button" class="btn btn-outline-primary">
Button with a long name.
</button>
</div>
Как я могу сделать так, чтобы кнопки всегда были одинаковой ширины и высоты, независимо от содержимого внутри них. А когда размер экрана большой, размер кнопок должен определяться размером «Кнопки с длинным именем».
Когда на маленьком экране, как на мобильном телефоне. Высота кнопок снова должна определяться высотой «Кнопки с длинным именем».
Ответ №1:
CSS-сетка может это сделать
.my-buttons {
display: inline-grid;
grid-template-columns: 1fr 1fr;
grid-gap: 5px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="text-center">
<div class="my-buttons">
<button type="button" class="btn btn-outline-primary">
1st Button
</button>
<button type="button" class="btn btn-outline-primary">
Button with a long name.
</button>
</div>
</div>
Комментарии:
1. примечание: найдите дубликат еще раз (нужно найти правильные ключевые слова)
2. Эй, просто обновил вопрос, чтобы было понятнее. Пожалуйста, проверьте это.
3. @YulePale ты запустил мой код? мой ответ-делать все, что ты хочешь
4. ЛОЛ, только что запустил его. Я думал, что мой вопрос был неясен, и именно поэтому я получал более ранние ответы. Но вы поняли это еще до того, как я обновил его. Спасибо вам :).
Ответ №2:
Добавление гибкой основы на 50% сделает обоих детей на 1/2 ширины .my-buttons
.my-buttons {
display: flex;
justify-content: center;
}
button {
cursor: pointer;
flex: 1 0 50%;
}
<div class="my-buttons">
<button type="button" class="btn btn-outline-primary">
1st Button
</button>
<button type="button" class="btn btn-outline-primary">
Button with a long name.
</button>
</div>
Комментарии:
1. Спасибо, но это не то, чего я хотел. Я хочу, чтобы длина кнопок не превышала содержимое кнопки с длинным именем. В вашем ответе кнопки занимают больше места, чем нужно.
2. Эй, просто обновил вопрос, чтобы было понятнее. Пожалуйста, проверьте это.
Ответ №3:
.btn {
flex: 1 1 0px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<div class="my-buttons d-flex">
<button type="button" class="btn btn-outline-primary">
1st Button
</button>
<button type="button" class="btn btn-outline-primary">
Button with a long name.
</button>
</div>
Установите их так, чтобы их гибкая основа была равна 0, и позвольте им расти:
Комментарии:
1. Эй, просто обновил вопрос, чтобы было понятнее. Пожалуйста, проверьте это.
2. Да, я это сделал. Это было не то решение, которое я искал. Спасибо вам за ваш ответ. Принятый ответ-это то, что я искал.