3
votes

Comment aligner les champs de saisie et les étiquettes d'un formulaire Bootstrap?

Je travaille sur des formulaires bootstrap-4 dans lesquels j'ai plusieurs champs de saisie et étiquettes. Je l'ai créé avec succès, mais je souhaite y ajouter des fonctionnalités afin qu'il soit parfait pour l'interface utilisateur et qu'il soit convivial.

Extrait de travail

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<form>

  <div class="container-fluid" style="border: 2px solid gray">
    <br>
    <div class="row container">
      <div class="input-group ">
        <label class="col-lg-2  text-primary">Company ID :</label> <input type="text" class="col-lg-4  form-control" disabled="disabled">
        <button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
        <label class="col-lg-2 text-primary ">Company Name :</label> <input type="text" class="col-lg-4 form-control " disabled="disabled">
      </div>
    </div>
    <hr style="border: 1px solid gray">
    <div class="row container-fluid">
      <div class="input-group ">
        <label for="usr" class="col-lg-2 text-primary ">Item Code :</label>
        <div class="dropdown-menu ">
          <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
        </div>
        <input type="text" class="form-control col-lg-4 ">
        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
        <label for="usr" class="col-lg-2 text-primary ">Item Name :</label>
        <input type="text" class="col-lg-4 form-control  ">
        <label for="usr" class="col-lg-2 text-primary ">Brand Code:</label>
        <div class="dropdown-menu ">
          <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
        </div>
        <input type="text" class="form-control col-lg-4 ">
        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
        <label for="usr" class="col-lg-2 text-primary ">Brand Name:</label>
        <input type="text" class="col-lg-3 form-control ">

      </div>
    </div>
    <div class="row container-fluid">
      <div class="input-group mt-3">
        <label for="usr" class="col-lg-2 text-primary ">Category Code :</label>
        <div class="dropdown-menu ">
          <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
        </div>
        <input type="text" class="form-control col-lg-4 ">
        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
        <label for="usr" class="col-lg-2 text-primary ">Category Name :</label>
        <input type="text" class="col-lg-4 form-control  ">
        <label for="usr" class="col-lg-2 text-primary ">Sub Category Code:</label>
        <div class="dropdown-menu ">
          <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
        </div>
        <input type="text" class="form-control col-lg-4 ">
        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
        <label for="usr" class="col-lg-2 text-primary ">Sub Category Name:</label>
        <input type="text" class="col-lg-3 form-control ">

      </div>
    </div>
    <div class="row container-fluid">
      <div class="input-group mt-3">
        <label for="usr" class="col-lg-2 text-primary ">Unit Code :</label>
        <div class="dropdown-menu ">
          <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
        </div>
        <input type="text" class="form-control col-lg-4 ">
        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
        <label for="usr" class="col-lg-2 text-primary ">Unit Name :</label>
        <input type="text" class="col-lg-4 form-control  ">
        <label for="usr" class="col-lg-2 text-primary ">Supplier Code:</label>
        <div class="dropdown-menu ">
          <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
        </div>
        <input type="text" class="form-control col-lg-4 ">
        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
        <label for="usr" class="col-lg-2 text-primary ">Supplier Name:</label>
        <input type="text" class="col-lg-3 form-control ">

      </div>
    </div>
    <div class="row container-fluid">
      <div class="input-group mt-3">
        <label for="usr" class="col-lg-2 text-primary ">GST Code :</label>
        <div class="dropdown-menu ">
          <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
        </div>
        <input type="text" class="form-control col-lg-4 ">
        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
        <label for="usr" class="col-lg-2 text-primary ">GST Percentage :</label>
        <input type="text" class="col-lg-4 form-control  ">
        <label for="usr" class="col-lg-2 text-primary ">SGST Percentage:</label>
        <input type="text" class="form-control col-lg-4 ">
        <button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
        <label for="usr" class="col-lg-2 text-primary ">CGST Percentage:</label>
        <input type="text" class="col-lg-3 form-control ">

      </div>
    </div>
    <div class="row container-fluid">
      <div class="input-group mt-3">
        <label for="usr" class="col-lg-2 text-primary ">Cost Price :</label>
        <input type="text" class="form-control col-lg-4 ">
        <button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
        <label for="usr" class="col-lg-2 text-primary ">Selling Price :</label>
        <input type="text" class="col-lg-4 form-control  ">
        <label for="usr" class="col-lg-2 text-primary ">MRP:</label>
        <input type="text" class="form-control col-lg-4 ">
        <button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
        <label for="usr" class="col-lg-2 text-primary ">Box Weight:</label>
        <input type="text" class="col-lg-3 form-control ">

      </div>
    </div>

    <hr style="border: 1px solid gray">

    <button id="btn-search" class="btn btn-default " type="submit">
				<i class="fa fa-save"></i>&nbsp;Save
			</button>
    <button id="btn-search" class="btn btn-default " type="submit">
				<i class='fa fa-eraser'></i>&nbsp;Clear
			</button>
    <button id="btn-search" class="btn btn-default " type="submit">
				<i class='fa fa-window-close'></i>&nbsp;Close
			</button>

    <br>
    <br>
  </div>

</form>

La sortie est correcte sur les petits appareils, mais sur les gros appareils, je suis confronté aux problèmes suivants:

J'aligne 4 libellés et champs de saisie sur une ligne, mais les champs de saisie semblent très petits de largeur sur l'interface utilisateur, car il y a tellement d'espace entre le libellé et le champ de saisie
l'en-tête qui est "Identifiant et nom de l'entreprise" Je souhaite les décaler pour qu'ils apparaissent au centre sur les grands écrans
J'ai des listes déroulantes avec des champs de saisie; les champs de saisie qui n'ont pas de liste déroulante que je veux prendre en pleine largeur, comme ils le font sur les petits appareils

Les changements que j'essaie d'apporter sont

Je veux une entrée champs avec liste déroulante non seulement déroulante

html css bootstrap-4

8 commentaires

pour le menu déroulant, vous pouvez utiliser ce getbootstrap.com/docs/4.1 / components / input-group /…

@NishargShah j'utilise la même chose, je pense

je ne vois pas la classe input-group-append

@NishargShah pouvez-vous m'aider avec du code? S'il vous plaît

pourquoi ne pas utiliser l'étiquette alignée en haut. cela vous donnera une bonne vue en ce qui concerne l'alignement à gauche

Vous avez des boutons invisibles entre les entrées sur les entrées les plus courtes sans bouton déroulant. Cela entraînera le décalage de l'autre étiquette mais commencera à montrer votre vrai problème. C'est également du HTML inutile qui est envoyé à l'utilisateur.

@Kandy j'ai essayé mais mon principal problème est que certains champs de saisie ont des listes déroulantes et d'autres pas

@DanielGale c'est parce que j'ai des entrées avec le menu déroulant et d'autres pas

4 Réponses :

2
votes

Vous pouvez faire quelque chose comme ceci:

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">

<style>
    .container {
        margin: 5px auto;
        padding: 5px;
        color: #17A2B8;
        font-family: Verdana, Geneva, sans-serif;
    }
    h1 {
        text-align: center;
    }
    .btn, .btn-outline-secondary {
        border-color: #17A2B8;
        background-color: #17A2B8;
        color: #ffffff;
    }
    .btn:hover, .btn-outline-secondary:hover {
        background-color: #ffffff;
        color: #17A2B8;
        border-color: #17A2B8;
    }
    .show > .btn-outline-secondary.dropdown-toggle {
        color: #ffffff;
        background-color: #17A2B8;
        border-color: #17A2B8;
    }
</style>

<div class="container">
    <h1>Form</h1>
    <form>
        <div class="form-row">
            <div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-6">
                <label for="companyId">Company ID</label>
                <input type="text" class="form-control" id="companyId">
            </div>
            <div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-6">
                <label for="companyName">Company Name</label>
                <input type="text" class="form-control" id="companyName">
            </div>
        </div>
        <hr>
        <div class="form-row">
            <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
                <label for="itemCode">Item Code</label>
                <div class="input-group">
                    <input type="text" class="form-control" aria-label="Text input with dropdown button">
                    <div class="input-group-append">
                        <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
                        <div class="dropdown-menu dropdown-menu-right">
                            <a class="dropdown-item" href="#">Item Code 1</a>
                            <a class="dropdown-item" href="#">Item Code 2</a>
                            <a class="dropdown-item" href="#">Item Code 3</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
                <label for="itemName">Item Name</label>
                <input type="text" class="form-control" id="itemName">
            </div>
            <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
                <label for="brandCode">Brand Code</label>
                <div class="input-group">
                    <input type="text" class="form-control" aria-label="Text input with dropdown button">
                    <div class="input-group-append">
                        <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
                        <div class="dropdown-menu dropdown-menu-right">
                            <a class="dropdown-item" href="#">Brand Code 1</a>
                            <a class="dropdown-item" href="#">Brand Code 2</a>
                            <a class="dropdown-item" href="#">Brand Code 3</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
                <label for="brandName">Brand Name</label>
                <input type="text" class="form-control" id="brandName">
            </div>
        </div>
        <div class="form-row">
            <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
                <label for="categoryCode">Category Code</label>
                <div class="input-group">
                    <input type="text" class="form-control" aria-label="Text input with dropdown button">
                    <div class="input-group-append">
                        <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
                        <div class="dropdown-menu dropdown-menu-right">
                            <a class="dropdown-item" href="#">Category Code 1</a>
                            <a class="dropdown-item" href="#">Category Code 2</a>
                            <a class="dropdown-item" href="#">Category Code 3</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
                <label for="categoryName">Category Name</label>
                <input type="text" class="form-control" id="categoryName">
            </div>
            <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
                <label for="subCategoryCode">Sub Category Code</label>
                <div class="input-group">
                    <input type="text" class="form-control" aria-label="Text input with dropdown button">
                    <div class="input-group-append">
                        <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
                        <div class="dropdown-menu dropdown-menu-right">
                            <a class="dropdown-item" href="#">Sub Category Code 1</a>
                            <a class="dropdown-item" href="#">Sub Category Code 2</a>
                            <a class="dropdown-item" href="#">Sub Category Code 3</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
                <label for="subCategoryName">Sub Category Name</label>
                <input type="text" class="form-control" id="subCategoryName">
            </div>
        </div>
        <div class="form-row">
            <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
                <label for="unitCode">Unit Code</label>
                <div class="input-group">
                    <input type="text" class="form-control" aria-label="Text input with dropdown button">
                    <div class="input-group-append">
                        <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
                        <div class="dropdown-menu dropdown-menu-right">
                            <a class="dropdown-item" href="#">Unit Code 1</a>
                            <a class="dropdown-item" href="#">Unit Code 2</a>
                            <a class="dropdown-item" href="#">Unit Code 3</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
                <label for="unitName">Unit Name</label>
                <input type="text" class="form-control" id="unitName">
            </div>
            <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
                <label for="supplierCode">Supplier Code</label>
                <div class="input-group">
                    <input type="text" class="form-control" aria-label="Text input with dropdown button">
                    <div class="input-group-append">
                        <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
                        <div class="dropdown-menu dropdown-menu-right">
                            <a class="dropdown-item" href="#">Supplier Code 1</a>
                            <a class="dropdown-item" href="#">Supplier Code 2</a>
                            <a class="dropdown-item" href="#">Supplier Code 3</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
                <label for="supplierName">Supplier Name</label>
                <input type="text" class="form-control" id="supplierName">
            </div>
        </div>
        <div class="form-row">
            <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
                <label for="gstCode">GST Code</label>
                <div class="input-group">
                    <input type="text" class="form-control" aria-label="Text input with dropdown button">
                    <div class="input-group-append">
                        <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
                        <div class="dropdown-menu dropdown-menu-right">
                            <a class="dropdown-item" href="#">GST Code 1</a>
                            <a class="dropdown-item" href="#">GST Code 2</a>
                            <a class="dropdown-item" href="#">GST Code 3</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
                <label for="gstPercentage">GST Percentage</label>
                <input type="text" class="form-control" id="gstPercentage">
            </div>
            <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
                <label for="sgstPercentage">SGST Percentage</label>
                <input type="text" class="form-control" id="sgstPercentage">
            </div>
            <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
                <label for="cgstPercentage">CGST Percentage</label>
                <input type="text" class="form-control" id="cgstPercentage">
            </div>
        </div>
        <div class="form-row">
            <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
                <label for="costPrice">Cost Price</label>
                <input type="text" class="form-control" id="costPrice">
            </div>
            <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
                <label for="sellingPrice">Selling Price</label>
                <input type="text" class="form-control" id="sellingPrice">
            </div>
            <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
                <label for="mrp">MRP</label>
                <input type="text" class="form-control" id="mrp">
            </div>
            <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
                <label for="boxWeight">Box Weight</label>
                <input type="text" class="form-control" id="boxWeight">
            </div>
        </div>
        <hr>
        <div class="col-auto my-1">
            <button type="submit" class="btn"><i class="fa fa-save"></i> Save</button>
            <button type="submit" class="btn"><i class="fa fa-eraser"></i> Clear</button>
            <button type="submit" class="btn"><i class="fa fa-window-close"></i> Close</button>
        </div>
        <hr>
    </form>
</div>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

et si vous le souhaitez, vous pouvez ajouter des espaces réservés.

3 commentaires

hey man, l'option de sélection que vous avez faite n'a pas de champ de saisie ... je veux un champ de saisie avec une liste déroulante à ses côtés ... l'option de sélection que vous avez faite, c'est seulement une option de sélection qui n'est pas un champ de saisie. ..désolé cette fois que je viens de voir le résultat que je n'ai pas vérifié attentivement, veuillez le modifier si vous le pouvez, comme vous pouvez le voir dans mon code, il y a d'abord un champ de saisie, puis un menu déroulant.

okok j'étais juste coincé c'est pourquoi j'ai demandé ... je vais le faire moi-même ... désolé pour cela

@dheerajkumar Hé, j'ai mis à jour ma réponse. Vérifiez la version mise à jour si vous l'aimez!

1
votes

Afin d'agrandir les entrées, j'ai changé la taille des colonnes. Tout le col-lg-2 que j'ai changé en col-lg-1 et tout le col-lg-4 que j'ai changé en col-lg-5 et les entrées semblent beaucoup plus complètes sur des écrans plus larges. Voici un codepen avec.

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<form>

  <div class="container-fluid" style="border: 2px solid gray">
    <br>
    <div class="row container" id="center">
      <div class="input-group ">
        <label class="col-lg-1  text-primary">Company ID :</label> <input type="text" class="col-lg-5 form-control" disabled="disabled">
        <button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
        <label class="col-lg-1  text-primary ">Company Name :</label> <input type="text" class="col-lg-5 form-control " disabled="disabled">
      </div>
    </div>
    <hr style="border: 1px solid gray">
    <div class="row container-fluid">
      <div class="input-group ">
        <label for="usr" class="col-lg-1 text-primary ">Item Code :</label>
        <div class="dropdown-menu ">
          <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
        </div>
        <input type="text" class="form-control col-lg-5 ">
        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
        <label for="usr" class="col-lg-1 text-primary ">Item Name :</label>
        <input type="text" class="col-lg-5 form-control  ">
        <label for="usr" class="col-lg-1 text-primary ">Brand Code:</label>
        <div class="dropdown-menu ">
          <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
        </div>
        <input type="text" class="form-control col-lg-5 ">
        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
        <label for="usr" class="col-lg-1 text-primary ">Brand Name:</label>
        <input type="text" class="col-lg-3 form-control ">

      </div>
    </div>
    <div class="row container-fluid">
      <div class="input-group mt-3">
        <label for="usr" class="col-lg-1 text-primary ">Category Code :</label>
        <div class="dropdown-menu ">
          <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
        </div>
        <input type="text" class="form-control col-lg-5 ">
        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
        <label for="usr" class="col-lg-1 text-primary ">Category Name :</label>
        <input type="text" class="col-lg-5 form-control  ">
        <label for="usr" class="col-lg-1 text-primary ">Sub Category Code:</label>
        <div class="dropdown-menu ">
          <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
        </div>
        <input type="text" class="form-control col-lg-5 ">
        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
        <label for="usr" class="col-lg-1 text-primary ">Sub Category Name:</label>
        <input type="text" class="col-lg-3 form-control ">

      </div>
    </div>
    <div class="row container-fluid">
      <div class="input-group mt-3">
        <label for="usr" class="col-lg-1 text-primary ">Unit Code :</label>
        <div class="dropdown-menu ">
          <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
        </div>
        <input type="text" class="form-control col-lg-5 ">
        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
        <label for="usr" class="col-lg-1 text-primary ">Unit Name :</label>
        <input type="text" class="col-lg-5 form-control  ">
        <label for="usr" class="col-lg-1 text-primary ">Supplier Code:</label>
        <div class="dropdown-menu ">
          <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
        </div>
        <input type="text" class="form-control col-lg-5 ">
        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
        <label for="usr" class="col-lg-1 text-primary ">Supplier Name:</label>
        <input type="text" class="col-lg-3 form-control ">

      </div>
    </div>
    <div class="row container-fluid">
      <div class="input-group mt-3">
        <label for="usr" class="col-lg-1 text-primary ">GST Code :</label>
        <div class="dropdown-menu ">
          <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
        </div>
        <input type="text" class="form-control col-lg-5 ">
        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
        <label for="usr" class="col-lg-1 text-primary ">GST Percentage :</label>
        <input type="text" class="col-lg-5 form-control  ">
        <label for="usr" class="col-lg-1 text-primary ">SGST Percentage:</label>
        <input type="text" class="form-control col-lg-5 ">
        <button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
        <label for="usr" class="col-lg-1 text-primary ">CGST Percentage:</label>
        <input type="text" class="col-lg-3 form-control ">

      </div>
    </div>
    <div class="row container-fluid">
      <div class="input-group mt-3">
        <label for="usr" class="col-lg-1 2 text-primary ">Cost Price :</label>
        <input type="text" class="form-control col-lg-5 4">
        <button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
        <label for="usr" class="col-lg-1 2 text-primary ">Selling Price :</label>
        <input type="text" class="col-lg-5 4 form-control  ">
        <label for="usr" class="col-lg-1 text-primary ">MRP:</label>
        <input type="text" class="form-control col-lg-5 4">
        <button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
        <label for="usr" class="col-lg-1 text-primary 2">Box Weight:</label>
        <input type="text" class="col-lg-3 3 form-control ">

      </div>
    </div>

    <hr style="border: 1px solid gray">

    <button id="btn-search" class="btn btn-default " type="submit">
                <i class="fa fa-save"></i>&nbsp;Save
            </button>
    <button id="btn-search" class="btn btn-default " type="submit">
                <i class='fa fa-eraser'></i>&nbsp;Clear
            </button>
    <button id="btn-search" class="btn btn-default " type="submit">
                <i class='fa fa-window-close'></i>&nbsp;Close
            </button>

    <br>
    <br>
  </div>

</form>

2 commentaires

certains champs de saisie affichent une taille plus grande..J'ai également essayé, mais j'ai rencontré ce genre de problèmes

use peut utiliser align-items: flex-start qui résoudra le problème de hauteur pour l'entrée.

1
votes

Comme je l'ai expliqué dans la section des commentaires sur l'alignement en haut, j'ai apporté quelques modifications à votre code pour la première ligne et d'autres sont commentées si vous le souhaitez.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>


<form>

  <div class="container-fluid" style="border: 2px solid gray;float: left;width: 100%;">
    <br>
    <div class="row container" style="float: left;width: 100%; margin: auto 6% auto 6%;">
      <div class="input-group ">
        <label class="col-lg-2  text-primary">Company ID :</label> <input type="text" class="col-lg-4  form-control" disabled="disabled">
        <button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
        <label class="col-lg-2 text-primary">Company Name :</label> <input type="text" class="col-lg-4 form-control " disabled="disabled">
      </div>
    </div>
    <hr style="border: 1px solid gray;float: left;width: 100%;">


	<div class="row container-fluid">
      <div class="input-group mt-3">
        <div class="col-lg-3">
	        <label for="usr" class="col-lg-12 text-primary">Item Code :</label>
	        <div class="dropdown-menu col-lg-2">
	          <a class="dropdown-item" href="#">Link 1</a> 
	          <a class="dropdown-item" href="#">Link 2</a>
	          <a class="dropdown-item" href="#">Link 3</a>
	        </div>
	        <input type="text" class="form-control col-lg-10" style="float:left;margin:auto;width: 83%;">
	        <button type="button" class="btn btn-info dropdown-toggle col-lg-12" data-toggle="dropdown" style="height: 36px;width: auto;"/>
	    </div>

	    <div class="col-lg-3">
        	<label for="usr" class="col-lg-10 text-primary ">Item Name :</label>
        	<input type="text" class="col-lg-10 form-control  ">
    	</div>

    	<div class="col-lg-3">
	        <label for="usr" class="col-lg-12 text-primary ">Brand Code:</label>
	        <div class="dropdown-menu col-lg-2">
	          <a class="dropdown-item" href="#">Link 1</a>
	          <a class="dropdown-item" href="#">Link 2</a> 
	          <a class="dropdown-item" href="#">Link 3</a>
	        </div>
	        
	        <input type="text" class="form-control col-lg-10" style="float:left;margin:auto;width: 83%;">
	        <button type="button" class="btn btn-info dropdown-toggle col-lg-2" data-toggle="dropdown" style="height: 36px;width: auto;"></button>
	    </div>

	    <div class="col-lg-3">
        	<label for="usr" class="col-lg-10 text-primary" >Brand Name:</label>
        	<input type="text" class="col-lg-10 form-control">
        </div>

      </div>
    </div>


   <!--  <div class="row container-fluid">
      <div class="input-group mt-3">
        <label for="usr" class="col-lg-2 text-primary" style="padding-top: 8px;">Item Code :</label>
        <div class="dropdown-menu ">
          <a class="dropdown-item" href="#">Link 1</a> 
          <a class="dropdown-item" href="#">Link 2</a>
          <a class="dropdown-item" href="#">Link 3</a>
        </div>
        <input type="text" class="form-control col-lg-4 ">
        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>

        <label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Item Name :</label>
        <input type="text" class="col-lg-4 form-control  ">
        <label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Brand Code:</label>
        <div class="dropdown-menu ">
          <a class="dropdown-item" href="#">Link 1</a>
          <a class="dropdown-item" href="#">Link 2</a> 
          <a class="dropdown-item" href="#">Link 3</a>
        </div>
        
        <input type="text" class="form-control col-lg-4 ">
        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
        <label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Brand Name:</label>
        <input type="text" class="col-lg-3 form-control ">

      </div>
    </div>

    <div class="row container-fluid">
      <div class="input-group mt-3">
        <label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Category Code :</label>
        <div class="dropdown-menu ">
          <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
        </div>
        <input type="text" class="form-control col-lg-4 ">
        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
        <label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Category Name :</label>
        <input type="text" class="col-lg-4 form-control  ">
        <label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Sub Category Code:</label>
        <div class="dropdown-menu ">
          <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
        </div>
        <input type="text" class="form-control col-lg-4 ">
        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
        <label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Sub Category Name:</label>
        <input type="text" class="col-lg-3 form-control ">

      </div>
    </div>

    <div class="row container-fluid">
      <div class="input-group mt-3">
        <label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Unit Code :</label>
        <div class="dropdown-menu ">
          <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
        </div>
        <input type="text" class="form-control col-lg-4 ">
        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
        <label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Unit Name :</label>
        <input type="text" class="col-lg-4 form-control  ">
        <label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Supplier Code:</label>
        <div class="dropdown-menu ">
          <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
        </div>
        <input type="text" class="form-control col-lg-4 ">
        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
        <label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Supplier Name:</label>
        <input type="text" class="col-lg-3 form-control ">

      </div>
    </div>

    <div class="row container-fluid">
      <div class="input-group mt-3">
        <label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">GST Code :</label>
        <div class="dropdown-menu ">
          <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
        </div>
        <input type="text" class="form-control col-lg-4 ">
        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
        <label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">GST Percentage :</label>
        <input type="text" class="col-lg-4 form-control  ">
        <label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">SGST Percentage:</label>
        <input type="text" class="form-control col-lg-4 ">
        <button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
        <label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">CGST Percentage:</label>
        <input type="text" class="col-lg-3 form-control ">

      </div>
    </div>

    <div class="row container-fluid">
      <div class="input-group mt-3">
        <label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Cost Price :</label>
        <input type="text" class="form-control col-lg-4 ">
        <button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
        <label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Selling Price :</label>
        <input type="text" class="col-lg-4 form-control  ">
        <label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">MRP:</label>
        <input type="text" class="form-control col-lg-4 ">
        <button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
        <label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Box Weight:</label>
        <input type="text" class="col-lg-3 form-control ">

      </div>
    </div> -->

    <hr style="border: 1px solid gray">

    <button id="btn-search" class="btn btn-default " type="submit">
				<i class="fa fa-save"></i>&nbsp;Save
			</button>
    <button id="btn-search" class="btn btn-default " type="submit">
				<i class='fa fa-eraser'></i>&nbsp;Clear
			</button>
    <button id="btn-search" class="btn btn-default " type="submit">
				<i class='fa fa-window-close'></i>&nbsp;Close
			</button>

    <br>
    <br>
  </div>

</form>

Même code sur le navigateur, il donne une zone de texte parfaite pour moi sur petit écran.

2 commentaires

hé regarder la taille du champ d'entrée est supérieure à l'entrée ayant une liste déroulante

Regardez, j'ai téléchargé une image sur un petit écran d'appareil

1
votes

J'ai répondu à une question similaire avant. Comme vous pouvez le voir, définir une largeur de colonne spécifique sur ne fonctionne pas bien pour toutes les étiquettes car elles sont de largeurs différentes.

Il existe plusieurs solutions de contournement pour cela, notamment la grille CSS et le tableau -cell width, mais selon l'OMI, la solution la plus simple consiste à utiliser display: table-cell et une requête multimédia pour qu'elle ne soit appliquée qu'au-dessus d'une largeur d'écran spécifique. Vous devrez également nettoyer le balisage en utilisant col-form-label et des groupes d'entrée correctement structurés.

      <div class="form-row align-items-center">
            <label for="usr" class="col-form-label col-md-2 text-primary">Item Code:</label>
            <div class="input-group col-lg col-md-4 align-items-start py-2">
                <input type="text" class="form-control">
                <div class="input-group-append">
                    <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
                    </div>
                </div>
            </div>
            ...
      </div>

Démo: https://www.codeply.com/go/GJ0Puh9pWd

Remarque: Don ' t utiliser ensemble row et container-fluid dans le même élément.

0 commentaires