web-dev-qa-db-fra.com

Ajustez les éléments en ligne avec Bootstrap

J'utilise Bootstrap 3 pour concevoir mon site Web et j'aimerais insérer une entrée de texte et 3 boutons horizontalement dans un div. Voici mon balisage:

<div style="width: 400px">
  <input class="form-control" type="text">
  <a class="btn" href="#">Button 1</a>
  <a class="btn" href="#">Button 2</a>
  <a class="btn" href="#">Button 3</a>
</div>

Mais la saisie de texte s’étend sur toute la largeur de la div et les boutons sont poussés dessous.

J'ai essayé de régler le mode d'affichage de la saisie de texte sur inline et inline-block mais cela n'a rien changé.

Aidez-moi?

htmlcsstwitter-bootstrap
5
Naïm Favier

Essayez ceci DEMO

<div class="form-inline">
    <div class="form-group">
        <input class="form-control" type="text">
    </div>
    <a class="btn btn-default" href="#">Button 1</a>
    <a class="btn btn-default" href="#">Button 2</a>
    <a class="btn btn-default" href="#">Button 3</a>
</div>
8
Tharaka Arachchige

J'ai remarqué que le class="form-control" est responsable de l'entrée couvrant toute la largeur. Vous devez également supprimer le style width='400px' et utiliser une classe d'amorçage ou simplement l'agrandir pour contenir les quatre éléments.

Voir ceci Fiddle

Puisque vous utilisez Bootstrap 3, vous devriez essayer ceci:

<div style="width: 600px">
   <div class="row">
       <input class="col-md-3" type="text">
       <a href="#" class="btn btn-default col-md-3">Button 1</a>
       <a href="#" class="btn btn-default col-md-3">Button 2</a>
       <a href="#" class="btn btn-default col-md-3">Button 3</a>
   </div>
</div>

Voir le bootstrap officiel 3 docs

1
k32y

La solution correcte aujourd'hui consiste à utiliser flexhttps://getbootstrap.com/docs/4.0/utilities/flex/

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

<div class="d-flex flex-row bg-info">
  <div class="p-2 bg-warning">Flex item 1</div>
  <div class="p-2 bg-danger">Flex item 2</div>
  <div class="p-2 bg-secondary">Flex item 3</div>
</div>

0
Academy of Programmer

Placez-le dans une balise de formulaire comme ceci

<form class="form-inline" role="form">
      <div style="width: 500px">
      <input class="form-control" type="text">
      <a class="btn" href="#">Button 1</a>
      <a class="btn" href="#">Button 2</a>
      <a class="btn" href="#">Button 3</a>
      </div>
</form>

Ajoutez également plus de largeur ou réduisez le bouton/texte afin que les 3 puissent s’adapter

0
kg_root

Votre code donné fonctionne selon votre description. Les trois boutons et le champ de texte sont dans la même ligne. Peut-être que vous n'avez pas lié la bibliothèque d'amorçage correctement. Voici le code avec lien bootstrap

 

<head>
  <script data-require="[email protected]" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
  <script data-require="bootstrap@*" data-semver="3.3.2" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
  <link href="style.css" rel="stylesheet" />
  <script src="script.js"></script>
</head>

<body>
  <div style="width: 400px">
    <input type="text" class="form-control" />
    <a href="#" class="btn">Button 1</a>
    <a href="#" class="btn">Button 2</a>
    <a href="#" class="btn">Button 3</a>
  </div>
</body>

0
emon