0

tengo un error que consiste en un input type text y un input type submit que están uno al lado de otro en un sistema de comentarios, estan posicionados con el sistema de columnas de bootstrap lucen algo así

introducir la descripción de la imagen aquí

En este punto ya la pantalla esta en el rango abarcado por col-sm-9 y col-sm-3 para llenar todo eso... el problema es cuando se encoge un poco más la pantalla colapsa y pasa esto.

introducir la descripción de la imagen aquí

Llevo rato intentando ver el porqué pasa esto y no lo encuentro, les dejo el fragmento del codigo si me pueden ayudar. Gracias

<form action="add_comment.php" method="POST" class="form-inline">

  <div class="row w-100 m-0 p-0">
    <div class="col-xl-10 col-lg-10 col-md-10 col-sm-9 p-0">
      <input type="text" name="comment" class="form-control w-100" placeholder="Escriba un 
comentario...">
      <input type="hidden" name="product_id" value="<?php echo $product_id ?>">
    </div>
    <div class="col-xl-2 col-lg-2 col-md-2 col-sm-3 d-flex p-0">
      <input type="submit" class="btn btn-success col-11 m-auto" value="Enviar">
    </div>
  </div>

</form>

2 respuestas 2

0

Espero te pueda servir esta respuesta.

Saludos

<div class="container-fluid">
    <form action="add_comment.php" method="POST" class="form-inline"></form>
    <div class="row mt-4">
        <div class="col-lg-10 mt-4">
            <input type="text" name="comment" class="form-control w-100" placeholder="Escriba un 
      comentario...">
            <input type="hidden" name="product_id" value="<?php echo $product_id ?>">
        </div>
        <div class="col mt-4">
            <input type="submit" class="btn btn-success w-100" value="Enviar">
        </div>
    </div>
    </form>
</div>

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

0

El problema radica en que no tienes definido para cada el número de columnas de grid que quieres que ocupe en las versiones de resolución de pantalla inferiores al breakpoint de bootstrap "sm".

En este caso he modificado ligéramente tu código para definir el espacio de manera que se pueda interpretar del mismo modo que en el breakpoint anterior (sm), ya que por defecto, si no lo defines en la maquetación, bootstrap interpretará que lo quieres es darle el número máximo de "cols", es decir, 12.

Este es tu código mofificado con un col-9 para el input-text y un col-3 para el input-submit:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script>

<form action="add_comment.php" method="POST" class="form-inline">

  <div class="row w-100 m-3 p-0">
    <div class="col-xl-10 col-lg-10 col-md-10 col-sm-9 col-9 p-0">
      <input type="text" name="comment" class="form-control w-100" placeholder="Escriba un 
comentario...">
      <input type="hidden" name="product_id" value="<?php echo $product_id ?>">
    </div>
    <div class="col-xl-2 col-lg-2 col-md-2 col-sm-3 col-3 d-flex p-0">
      <input type="submit" class="btn btn-success col-11 m-auto" value="Enviar">
    </div>
  </div>

</form>

Además, comparto a continuación un enlace a la documentación de bootstrap sobre el uso de su framework para los formularios, por si te fuera de ayuda.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.