Блог

Главная - Вопросы по программированию - сделать так, чтобы текстовые поля и кнопки занимали весь div

сделать так, чтобы текстовые поля и кнопки занимали весь div

#php #html #css

#php #HTML #css

Вопрос:

Я хочу, чтобы и текстовое поле, и кнопка занимали весь div (который окрашен) только с помощью bootstrap. Здесь я показываю вам скриншот моего экрана: 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>

Комментарии:

1. Вы тоже пытались установить ширину контейнера? Чтобы заполнить всю ширину чего-либо, это что-то (или один из его родителей) должно иметь заданную ширину

2. Я считаю .container , что класс bootstrap уже имеет определенную ширину, установленную для него. Вы могли бы попробовать удалить этот класс.

Ответ №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 */
   }

Ответ №2:

добавьте еще один div с class = «container» перед формой. это будет работать