问题描述
我希望文本框和按钮都仅使用引导程序来占据整个div(彩色)。在这里,我向您显示屏幕截图:https://postimg.cc/yJcPtVSg。我尝试了几种方法(输入col-12),但没有成功。这是我的代码:
<html>
<head>
<Meta charset="UTF-8">
<title></title>
<Meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="css/jquery-ui.css" />
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui.js"></script>
<LINK REL=StyleSheet HREF="css2/bootstrap.css" TYPE="text/css">
</head>
<body>
<div class="container" style='height:600px;'>
<div class='row h-100 '>
<div class='col bg-danger my-auto d-flex justify-content-center alig-items-center '>
<form action="lineas.PHP" method="post">
<div class ='row m-3 '>
<?PHP echo("Elige origen: ");?>
<input type="text" id="origen" name="origen" class="form-control ">
</div>
<div class ="row m-3">
<?PHP echo("Elige destino: ");?>
<input type="text" id="destino" name="destino" class="form-control">
</div>
<div class ="row m-3">
Selecciona una fecha: <input type="text" id="datepicker" name="fecha" class="form-control">
</div>
<div class ="row m-3">
<input type="submit" name="enviar" value="Enviar" class="btn btn-primary btn-block">
</div>
</form>
<script src="js2/popper.min.js" type="text/javascript"></script>
<script src="js2/utilidades.js" type="text/javascript"></script>
</div>
</div>
</div>
</body>
</html>
解决方法
添加此CSS。
.full-width {
width: 100vw;
position: relative;
left: 50%; /* adds left 50% to the element */
right: 50%; /* adds right 50% to the element */
margin-left: -50vw; /* it works as left: 0 */
margin-right: -50vw; /* it works as right: 0 */
}
,
在表格前添加另一个class =“ container”的div。它会工作