Tengo esta barra de navegación y un campo de entrada en la barra de navegación. Quiero establecer el ancho de entrada a todo el ancho restante de la barra de navegación. Y debería ser receptivo . Quiero decir que el ancho de entrada debe cambiarse cuando cambia el tamaño del dispositivo. Por favor, ayúdame.

li {
list-style: none;
}
.post-edit .nav-header {
    border: 1px solid #ddd;
    height: 40px;
}

.post-edit .nav-header ul li button {
    border: 1px solid #727272;
    background-color: #fff;
    color: #727272;
    font-size: 14px;
    padding: 3.5px 8px;
    border-radius: 3px;
    margin-top: 5.3px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<body>
  <div class="container-fluid p-0">  
    <!-- Main Container -->
    <main class="container-wrapper">
    
      <div class="post-edit">
        <form action="" method="post">
          <div class="nav-header navbar navbar-expand-sm">
            <!-- Left -->
            <ul class="navbar-nav">
              <li class="nav-item">
                <input type="text" name="p-title" placeholder="Title">
              </li>
            </ul>

            <!-- Right -->
            <ul class="navbar-nav ml-auto">
              <li class="nav-item">
                <button class="nav-link">Preview</button>
              </li>
              <li class="nav-item">
                <button class="nav-link">Publish</button>
              </li>              
            </ul>
          </div>
      </div>
      </form>
  </div><!-- /.post-edit -->
  </main> <!-- /Main Container -->  
  </div>
</body>
0
PK Kulhari 25 ago. 2020 a las 19:23

2 respuestas

La mejor respuesta

Le aconsejaría que actualice a bootstrap 4 y superior para que pueda obtener clases de ayuda y utilidad para facilitar su trabajo.

Aquí es cómo puede lograrlo con bootstrap 4. puede simplemente cambiar el estilo de nuevo a bootstrap 3 si lo desea o usar css3 heredado.

  • paso 1: cambie la pantalla del contenedor de embalaje a caja flexible
  • Paso 2: configure todos los elementos secundarios en flex grow 1, lo que le indica al elemento secundario que se estire y ocupe todo el espacio restante del elemento principal.
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
        integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
        integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous">
    </script>
    <style>
        body {
            padding: 4px;
            margin-top: 2rem;
        }

        li {
            list-style: none;
        }

        .post-edit .nav-header {
            border: 1px solid #ddd;
            height: 40px;
        }

        .post-edit .nav-header ul li button {
            border: 1px solid #727272;
            background-color: #fff;
            color: #727272;
            font-size: 14px;
            padding: 3.5px 8px;
            border-radius: 3px;
            margin-top: 5.3px;
        }
    </style>
</head>

<body>

    <div class="container-fluid p-0">
        <!-- Main Container -->
        <main class="container-wrapper">

            <div class="post-edit">
                <form action="" method="post">
                    <div class="nav-header navbar navbar-expand-sm d-flex">
                        <!-- Left -->
                        <ul class="navbar-nav bg-primary flex-grow-1">
                            <li class="nav-item flex-grow-1 mr-1 ">
                                <div class="bg-success d-flex flex-grow-1">
                                    <input type="text" name="p-title" placeholder="Title" class="flex-grow-1">
                                </div>
                            </li>
                        </ul>

                        <!-- Right -->
                        <ul class="navbar-nav ml-auto">
                            <li class="nav-item">
                                <button class="nav-link">Preview</button>
                            </li>
                            <li class="nav-item">
                                <button class="nav-link">Publish</button>
                            </li>
                        </ul>
                    </div>
            </div>
            </form>
    </div><!-- /.post-edit -->
    </main> <!-- /Main Container -->
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
    </script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
        integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous">
    </script>
</body>

</html>
1
Dharman 25 ago. 2020 a las 21:43

Necesitas ampliar tu input ancho. Entonces, agregue esto a css.

Fórmula: width = 100% - (nav margin) - (ul margin);

input {
 width: calc(100% - 15px - 1em); // 15px > nav-margin | 1em > ul margin
}

Verifique el fragmento

li {
  list-style: none;
}

.post-edit .nav-header {
  border: 1px solid #ddd;
  height: 40px;
}

.post-edit .nav-header ul li button {
  border: 1px solid #727272;
  background-color: #fff;
  color: #727272;
  font-size: 14px;
  padding: 3.5px 8px;
  border-radius: 3px;
  margin-top: 5.3px;
}

input {
  width: calc(100% - 15px - 1em);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<body>
  <div class="container-fluid p-0">
    <!-- Main Container -->
    <main class="container-wrapper">

      <div class="post-edit">
        <form action="" method="post">
          <div class="nav-header navbar navbar-expand-sm">
            <!-- Left -->
            <ul class="navbar-nav">
              <li class="nav-item">
                <input type="text" name="p-title" placeholder="Title">
              </li>
            </ul>

            <!-- Right -->
            <ul class="navbar-nav ml-auto">
              <li class="nav-item">
                <button class="nav-link">Preview</button>
              </li>
              <li class="nav-item">
                <button class="nav-link">Publish</button>
              </li>
            </ul>
          </div>
      </div>
      </form>
  </div>
  <!-- /.post-edit -->
  </main>
  <!-- /Main Container -->
  </div>
</body>
0
Ajeet Eppakayala 25 ago. 2020 a las 17:11