لتحقيق هذا الهدف، يمكنك استخدام بعض قواعد CSS لضبط ارتفاع الزر ليكون متساويًا مع حقل الإدخال. إليك كيف يمكن تحقيق ذلك:
htmlhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap button inside input-grouptitle>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<style>
/* Add this CSS to your stylesheet */
.input-group-btn {
position: relative;
width: 1%;
white-space: nowrap;
vertical-align: middle;
}
.input-group-btn>.btn {
position: absolute;
font-size: 12px; /* تعديل حجم الخط حسب الحاجة */
height: 100%; /* جعل ارتفاع الزر يساوي ارتفاع حقل الإدخال */
}
style>
head>
<body>
<div class="container">
<h2>Bootstrap button inside input-grouph2>
<p>How to make it so that it appears nicely after input page with same height?p>
<div class="input-group">
<input type="text" class="form-control"/>
<span class="input-group-btn">
<button class="btn btn-default" type="submit">
<i class="fa fa-search">i>
button>
span>
div>
div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">script>
body>
html>
هذا التعديل يجعل ارتفاع زر البحث يساوي ارتفاع حقل الإدخال، ويضمن أنهما يظهران بشكل جيد معًا دون أية فجوات فارغة.
المزيد من المعلومات
لتحقيق التناسق في الظهور بين حقل الإدخال وزر البحث داخل عنصر input-group في Bootstrap، يمكنك استخدام بعض الأساليب الإضافية في CSS. على سبيل المثال، يمكنك تعيين ارتفاع زر البحث ليكون نفس ارتفاع حقل الإدخال، وذلك باستخدام height: 100% وتعيين padding مناسب للزر. إليك كيف يمكن تحقيق ذلك:
htmlhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap button inside input-grouptitle>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<style>
/* Add this CSS to your stylesheet */
.input-group-addon button {
height: 34px; /* تعيين ارتفاع زر البحث */
padding-top: 6px; /* تعيين البادنج العلوي للزر */
padding-bottom: 6px; /* تعيين البادنج السفلي للزر */
}
style>
head>
<body>
<div class="container">
<h2>Bootstrap button inside input-grouph2>
<p>How to make it so that it appears nicely after input page with same height?p>
<div class="input-group">
<input type="text" class="form-control"/>
<span class="input-group-addon">
<button class="btn btn-default" type="submit">
<i class="fa fa-search">i>
button>
span>
div>
div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">script>
body>
html>
هذا التعديل يجعل زر البحث يظهر بنفس ارتفاع حقل الإدخال، ويساعد في تحقيق التناسق المطلوب في التصميم.
