web-dev-qa-db-fra.com

Forme horizontale: la saisie de texte à côté de l'étiquette ne fonctionne pas

J'essaie de placer l'étiquette sur la même ligne que la zone de texte sous une forme horizontale Bootstrap 4. Ne semble pas fonctionner. Les zones de texte apparaissent toujours à la ligne suivante. Toute aide est grandement appréciée.

<div class="form-group form-group-sm col-sm-6">
  <label for="first_name" class="col-form-label">First Name</label>
  <div>
    <input type="text" class="form-control" id="first_name" name="first_name">
  </div>
</div>

violon: https://jsfiddle.net/gunnersfan/mrc4tdu1/

twitter-bootstrapbootstrap-4
3
gunnersfan

Le col-* doit être dans .row. Utilisez la classe de colonnes de la grille sur les étiquettes et les wrappers d'entrée ...

http://www.codeply.com/go/TUs7hGHnXP

<form class="form-horizontal">
    <div class="container">
        <div class="row">
            <div class="form-group form-group-sm col-sm-6">
                <div class="row">
                    <label for="first_name" class="col-sm-3 col-form-label">First Name</label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control" id="first_name" name="first_name">
                    </div>
                </div>
            </div>
            <div class="form-group form-group-sm col-sm-6">
                <div class="row">
                    <label for="last_name" class="col-sm-3 col-form-label">Last Name</label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control" id="last_name" name="last_name">
                    </div>
                </div>
            </div>
            <div class="form-group form-group-sm col-sm-6">
                <div class="row">
                    <label for="Street" class="col-sm-3 col-form-label">Street</label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control" id="Street" name="Street">
                    </div>
                </div>
            </div>
            <div class="form-group form-group-sm col-sm-6">
                <div class="row">
                    <label for="City" class="col-sm-3 col-form-label">City</label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control" id="City" name="City">
                    </div>
                </div>
            </div>

        </div>

    </div>
</form>

http://www.codeply.com/go/TUs7hGHnXP

7
Zim

Pour une mise en page flexible, vous pouvez également utiliser le formulaire en ligne:

<form class="form-inline" action="/action_page.php">
  <label for="email" class="mr-sm-2">Email address:</label>
  <input type="email" class="form-control mb-2 mr-sm-2" id="email">
  <label for="pwd" class="mr-sm-2">Password:</label>
  <input type="password" class="form-control mb-2 mr-sm-2" id="pwd">
  <div class="form-check mb-2 mr-sm-2">
    <label class="form-check-label">
       <input class="form-check-input" type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-primary mb-2">Submit</button>
</form>

Voir Formulaires en ligne , Espacement et Flexbox

0
GKislin

Vous pouvez écrire la forme horizontale de bootstrap précédente comme suit

<form>
<div class="form-group row">
    <label for="email" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
        <input type="text" class="form-control" id="email" value="" placeholder="Email Address">
    </div>
</div>
<div class="form-group row">
    <label for="password" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
        <input type="password" class="form-control" id="password" placeholder="Password">
    </div>
</div></form>
0
Sabbir Rupom