3
votes

Comment placer deux groupes d'entrée côte à côte sous forme bootstrap

J'essaie de réaliser une mise en page de formulaire où deux éléments form-group sont côte à côte sur une seule ligne. J'ai essayé de coiffer avec les propriétés suivantes; display: inline , display: flex , etc., mais aucun de ces éléments n'a fonctionné.

Voici un extrait des éléments form-group qui Je veux être côte à côte:

<div class="form-group">
    <label for="entercomments" class="col-sm-2 control-label">From Date</label>
    <div class="col-sm-10">
        <div class="input-group fromdate inline"  data-date-format="yyyy-mm-dd" style="width:250px">
            <input type="text" class="form-control fromdate"  placeholder="dd-mmm-yyyy" id="FromDate" runat="server" data-date-container="#formDiv" />
            <div class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></div>
        </div>
    </div>
</div>
<div class="form-group">
    <label for="entercomments" class="col-sm-2 control-label">To Date</label>
    <div class="col-sm-10">
        <div class="input-group todate inline" data-date-format="yyyy-mm-dd" style="width:250px">
            <input type="text" class="form-control todate" placeholder="dd-mmm-yyyy" id="ToDate" runat="server" data-date-container="#formDiv"  />
            <div class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></div>
        </div>
    </div>
</div>

bootstrap-4 twitter-bootstrap twitter-bootstrap-3

0 commentaires

4 Réponses :

2
votes

Voyant que vous utilisez Bootstrap, vous pouvez utiliser les bootstraps système de grille ici pour obtenir la mise en page requise:

<div class="row">
  <div class="col">
    <div class="form-group">
      <!-- Existing form group markup -->
    </div>
  </div>
  <div class="col">
    <div class="form-group">
      <!-- Existing form group markup -->
    </div>
  </div>
</div>

L'idée ici est d'enfermer les éléments "form-group" que vous souhaitez aligner sur la même ligne, dans une "colonne" (ie

  code>). Chaque colonne est ensuite incluse dans une "ligne" commune (c'est-à-dire   ) et, par défaut, cela fera que chaque colonne partagera la moitié de la largeur de la ligne.  p>

0 commentaires

0
votes

vous devez placer les deux entrées dans des colonnes séparées d'une même ligne comme indiqué ci-dessous:

<div class="row">
  <div class="col">
     <input type="text" class="form-control">
  </div>
  <div class="col">
     <input type="text" class="form-control">
  </div>
</div>

0 commentaires

3
votes

utilisez la grille de formulaire bootstrap4, vérifiez ces 2 exemples

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<form class="p-3">
  <div class="form-row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
  </div>
</form>

<form class="p-3">
  <div class="form-row align-items-center">
    <div class="col-auto">
      <label class="sr-only" for="inlineFormInput">Name</label>
      <input type="text" class="form-control mb-2" id="inlineFormInput" placeholder="Jane Doe">
    </div>
    <div class="col-auto">
      <label class="sr-only" for="inlineFormInputGroup">Username</label>
      <div class="input-group mb-2">
        <div class="input-group-prepend">
          <div class="input-group-text">@</div>
        </div>
        <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username">
      </div>
    </div>
    <div class="col-auto">
      <button type="submit" class="btn btn-primary mb-2">Submit</button>
    </div>
  </div>
</form>

1 commentaires

j'ai déjà eu un autre bootstrap mais oui ce concept de grille est clair pour moi, merci d'avoir mis tant d'efforts ... La solution et l'explication de Dacre fonctionnent bien

0
votes

Je pense que vous devez créer une zone autour de deux formulaires.

<div style="display: inline-flex">
  <div class="form-group">

  </div>
  <div class="form-group">

  </div>
</div>

0 commentaires