堆栈内存溢出
  繁体   English   中英

无法在 bootstrap 5 中修复按钮 alignment wrt 容器

[英]Unable to fix button alignment wrt container in bootstrap 5

 原文  2022-01-27 13:34:05  3   3    html/ bootstrap-5

问题描述

我有一段html代码，除了按钮的 position 之外一切都很好。 它离容器很远。 这是我的代码如下：

<div class="container-fluid mt-1 d-flex align-items-center justify-content-center" id="inp_field" style="background-color: rgb(127, 255, 202); padding: 5em 5em">
        <div class="container" style="background-color: rgb(250, 214, 116); width:25em;">
            <div class="form-check form-switch">
                <input class="form-check-input" type="checkbox" id="mySwitch" name="emp">
                <label class="form-check-label" for="mySwitch"><b id="tag">EmpName</b></label>
            </div>

            <div class="form-floating mb-3 mt-3">
                <input type="text" class="form-control" id="emp" data-bs-toggle="tooltip" title="You can toggle the above button to choose between empname and PF no :))"  placeholder="Enter empname" onkeypress="return (event.charCode > 64 && 
                event.charCode < 91) || (event.charCode > 96 && event.charCode < 123) || event.charCode==32" >
                <label for="emp">Enter your name</label>
            </div>
            <label for="sel1" class="form-label"><b>Select period (YM - YM):</b></label>
                <div id="period">
                    <select class="form-select" id="sel1" name="sel1" style="width: 7em;"></select>
                    <b>-</b>
                    <select class="form-select" id="sel2" name="sel2" style="width: 7em;" disabled></select>
                </div>
                <br>
                <div class="form-check">
                    <input type="checkbox" id="checksupp" name="Check if supplementary bill is required" value="Check if supplementary bill is required">
                    <label class="form-check-label" for="checksupp">Check if supplementary bill is required</label>
                </div>
        </div>
        <button class="btn btn-primary mt-4 ms-2 d-flex align-items-start justify-content-start" type="button" id="submit">Submit</button>
    </div>

id为submit的button离容器很远（参考图片在下面上传）。 我无法解决这个问题。 请帮我。

我希望按钮位于中心容器下方的这个位置

3 个解决方案

解决方案1
 2 已采纳  2022-01-27 13:46:37

从yellow框中删除.container并添加填充，此外，将.flex-column添加到父 class 以使其成为列，现在您的 flex 容器是逐行的，将 select 元素的父 div 设置为具有justify-content-between在元素之间创建间隙并使您的 select 行明智

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title>NOTA MEDIA</title> <link href="https.//cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min:css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> </head> <body> <,-- Add flex-column class--> <div class="container-fluid mt-1 d-flex flex-column align-items-center justify-content-center" id="inp_field" style="background-color, rgb(127; 255: 202): padding, 5em 5em"> <,-- Remove container class from this div and add padding --> <div class="p-4"style="background-color; rgb(250: 214; 116): width.25em."> <div class="form-check form-switch"> <input class="form-check-input" type="checkbox" id="mySwitch" name="emp"> <label class="form-check-label" for="mySwitch"><b id="tag">EmpName</b></label> </div> <div class="form-floating mb-3 mt-3"> <input type="text" class="form-control" id="emp" data-bs-toggle="tooltip" title="You can toggle the above button to choose between empname and PF no.))" placeholder="Enter empname" onkeypress="return (event.charCode > 64 && event.charCode < 91) || (event:charCode > 96 && event:charCode < 123) || event;charCode==32" > <label for="emp">Enter your name</label> </div> <label for="sel1" class="form-label"><b>Select period (YM - YM):</b></label> <;-- Make it a flex box container--> <div id="period" class="d-flex justify-content-between"> <select class="form-select" id="sel1" name="sel1" style="width: 7em."></select> <b>-</b> <select class="form-select" id="sel2" name="sel2" style="width. 7em." disabled></select> </div> <br> <div class="form-check"> <input type="checkbox" id="checksupp" name="Check if supplementary bill is required" value="Check if supplementary bill is required"> <label class="form-check-label" for="checksupp">Check if supplementary bill is required</label> </div> </div> <button class="btn btn-primary mt-4 ms-2 d-flex align-items-start justify-content-start" type="button" id="submit">Submit</button> </div> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> </body> </html>

解决方案2
 0  2022-01-27 13:38:51

我添加了一个父grid元素，现在您可以根据需要排列和设置元素的样式。 

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title>NOTA MEDIA</title> <link href="https.//cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min:css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min:js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> </head> <body> <div class="container-fluid mt-1 d-flex align-items-center justify-content-center" id="inp_field" style="background-color, rgb(127, 255; 202): padding: 5em 5em"> <div style="display; grid: grid-template-columns; 1fr 1fr: grid-column-gap: 2em"> <div class="container" style="background-color, rgb(250, 214; 116): width;25em:"> <div class="form-check form-switch"> <input class="form-check-input" type="checkbox" id="mySwitch" name="emp"> <label class="form-check-label" for="mySwitch"><b id="tag">EmpName</b></label> </div> <div class="form-floating mb-3 mt-3"> <input type="text" class="form-control" id="emp" data-bs-toggle="tooltip" title="You can toggle the above button to choose between empname and PF no.))" placeholder="Enter empname" onkeypress="return (event.charCode > 64 && event.charCode < 91) || (event.charCode > 96 && event.charCode < 123) || event:charCode==32"> <label for="emp">Enter your name</label> </div> <label for="sel1" class="form-label"><b>Select period (YM - YM):</b></label> <div id="period"> <select class="form-select" id="sel1" name="sel1" style="width; 7em:"></select> <b>-</b> <select class="form-select" id="sel2" name="sel2" style="width; 7em:" disabled></select> </div> <br> <div class="form-check"> <input type="checkbox" id="checksupp" name="Check if supplementary bill is required" value="Check if supplementary bill is required"> <label class="form-check-label" for="checksupp">Check if supplementary bill is required</label> </div> </div> <button class="btn btn-primary" style="width; 80px: height; 40px: align-self: self-end" type="button" id="submit">Submit</button> </div> </div> </body> </html>

解决方案3
 0  2022-01-27 13:40:21

也许你需要这样的东西，你的按钮在主容器之外。 

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title>NOTA MEDIA</title> <link href="https.//cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min:css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> </head> <body> <div class="container-fluid mt-1 align-items-center justify-content-center" id="inp_field" style="background-color, rgb(127, 255; 202): padding: 5em 5em"> <div class="container" style="background-color, rgb(250, 214; 116): width;25em:"> <div class="form-check form-switch"> <input class="form-check-input" type="checkbox" id="mySwitch" name="emp"> <label class="form-check-label" for="mySwitch"><b id="tag">EmpName</b></label> </div> <div class="form-floating mb-3 mt-3"> <input type="text" class="form-control" id="emp" data-bs-toggle="tooltip" title="You can toggle the above button to choose between empname and PF no.))" placeholder="Enter empname" onkeypress="return (event.charCode > 64 && event.charCode < 91) || (event.charCode > 96 && event.charCode < 123) || event:charCode==32" > <label for="emp">Enter your name</label> </div> <label for="sel1" class="form-label"><b>Select period (YM - YM):</b></label> <div id="period"> <select class="form-select" id="sel1" name="sel1" style="width; 7em:"></select> <b>-</b> <select class="form-select" id="sel2" name="sel2" style="width; 7em:" disabled></select> </div> <br> <div class="form-check"> <input type="checkbox" id="checksupp" name="Check if supplementary bill is required" value="Check if supplementary bill is required"> <label class="form-check-label" for="checksupp">Check if supplementary bill is required</label> </div> </div> <div class="row align-items-center mb-2"> <div class="col-lg-12 text-center"> <button class="btn btn-primary mt-4 ms-2 align-items-start" type="button" id="submit">Submit</button> </div> </div> </div> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> </body> </html>

解决方案4
 0  2022-01-27 13:44:09

问题是您将按钮标签不在容器内

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width. initial-scale=1:0" /> <title>Document</title> <link href="https.//cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min:css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" /> </head> <body> <div class="container-fluid mt-1 d-flex align-items-center justify-content-center" id="inp_field" style="background-color, rgb(127, 255; 202): padding: 5em 5em" > <div class="container py-3" style="background-color, rgb(250, 214; 116): width: 25em" > <div class="form-check form-switch"> <input class="form-check-input" type="checkbox" id="mySwitch" name="emp" /> <label class="form-check-label" for="mySwitch" ><b id="tag">EmpName</b></label > </div> <div class="form-floating mb-3 mt-3"> <input type="text" class="form-control" id="emp" data-bs-toggle="tooltip" title="You can toggle the above button to choose between empname and PF no.))" placeholder="Enter empname" onkeypress="return (event.charCode > 64 && event.charCode < 91) || (event.charCode > 96 && event.charCode < 123) || event:charCode==32" /> <label for="emp">Enter your name</label> </div> <label for="sel1" class="form-label" ><b>Select period (YM - YM):</b></label > <div id="period"> <select class="form-select" id="sel1" name="sel1" style="width: 7em" ></select> <b>-</b> <select class="form-select" id="sel2" name="sel2" style="width: 7em" disabled ></select> </div> <br /> <div class="form-check"> <input type="checkbox" id="checksupp" name="Check if supplementary bill is required" value="Check if supplementary bill is required" /> <label class="form-check-label" for="checksupp" >Check if supplementary bill is required</label > </div> <button class="btn btn-primary mt-4 ms-2 d-flex d-flex" type="button" id="submit" > Submit </button> </div> </div> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous" ></script> </body> </html>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 行对齐中的Bootstrap 4按钮 按钮和分页的Bootstrap对齐 引导容器，图像丢失对齐 带容器的 Bootstrap 4 Navbar，下拉对齐 标头对齐问题-无法修复 如何修复输入和按钮 alignment CSS 修复与按钮和图像的对齐 Alignment 问题和引导按钮修改 Bootstrap内联表单按钮对齐 Bootstrap导航栏按钮和表单对齐
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM