Je configurais un formulaire avec bootstrap 4 mais les colonnes n'entraînent pas la création d'espace indésirable et réduisent la taille de la boîte d'entrée.
J'ai essayé d'utiliser différents codes CDN de Bootstrap CSS de côté des cdn de bottestrap, mais le problème persiste toujours. Pour que les zones d'entrée soient alignées sur Col. -MD-6 à gauche et à droite respectivement.
3 Réponses :
Définir la marge personnalisée pour cette classe espère que cela fonctionnera.
Vous utilisez Col-MD-6, c'est pourquoi le champ de saisie ne correspond pas à la ligne.Vous devez utiliser COL-LG-12 ou COL-MD-12. Cochez Documentation Comment le système de grille fonctionne ici Bootstrap 4 système de grille
Voici une solution où j'ai utilisé p> W-100 code> pour utiliser la largeur complète.
Mon Tipp em> strong> est de fort> Commencez toujours avec un petit écran fort> où j'ai utilisé col-12 code>.
Lorsque l'écran est plus grand, ils peuvent être côte à côte avec col-md-6 code> pour les deux.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!------ Begin Description Section ------->
<div id="Description_details" class="container">
<div class="row">
<div class="step body current w-100" id="trade-steps-p-2" role="tabpanel" aria-labelledby="" aria-hidden="false" style="display: block;">
<fieldset class="trade">
<legend>What are you Buying?</legend>
<div class="row">
<div class="form-group col-12 col-md-6 required" aria-required="true">
<label for="ContractName">Give Your Trade a Name
<a href="#" data-toggle="popover" data-trigger="hover" data-content=" data-original-title="" title="">
<i class=" fa fa-question-circle"></i>
</a>
</label>
<input name="data[Contract][name]" class="form-control" maxlength="50" type="text" id="ContractName" required="required" aria-required="true" aria-invalid="false">
</div>
<div class="form-group col-12 col-md-6 required" aria-required="true">
<label for="">Industry Classification</label>
<select name="data[Contract][industry]" class="form-control" id="" required="required" aria-required="true" aria-invalid="false">
<option value="GENERAL_GOODS_SERVICES" selected="selected">General Goods & Services</option>
<option value="AGRICULTURE_LIVESTOCK_GAME">Agriculture, Livestock & Game</option>
<option value="ART_ANTIQUES_COLLECTIBLES">Art, Antiques & Collectibles</option>
<option value="BUSINESS_SALE_BROKING">Business Sale & Broking</option>
<option value="VEHICLES_WATERCRAFT">Cars, Bikes & Watercraft</option>
<option value="CONSTRUCTION">Construction</option>
</select>
</div>
</div>
</div>
</div>
Bienvenue dans le débordement de la pile! Les questions à la recherche d'un code de code doivent inclure le code le plus court nécessaire pour la reproduire dans la question elle-même de préférence dans un Empile Snippet . Voir Comment créer un exemple minimal, complet et vérifiable
Que voulez-vous, expliquez brièvement dans votre question
Bootstrap a également des valeurs par défaut pour la marge et le rembourrage. . . . Creuser profondément.
Vous ne devriez pas mélanger votre contenu avec la grille de mise en page si mal. Placez votre élément de colonne immédiatement à l'intérieur de votre élément de ligne et votre contenu à l'intérieur. Vous éliminerez de nombreux maux de tête en gardant des choses séparées.