使文本框和按钮占据整个 div

Question

我希望文本框和按钮仅使用引导程序占用整个 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>

Answer 1

添加此 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 */
   }

Answer 2

在表单之前添加另一个带有 class = "container" 的 div。 它会工作