Passform inline-Elemente in einer Zeile mit Bootstrap

Ich bin mit Bootstrap 3 design für meine Webseite und ich möchte, um zu passen ein text-input-und 3-Tasten horizontal in einem div. Hier ist mein markup :

<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>

Aber der text input erstreckt sich auf die gesamte div-Breite und die Tasten geschoben bekommen darunter.

Ich habe versucht, die Einstellung der text-Eingabe-Anzeige-Modus zu inline und inline-block aber es nicht etwas ändern.

Helfen?

Versuchen flex sowie getbootstrap.com/docs/4.0/utilities/flex

InformationsquelleAutor Naïm Favier | 2015-06-18

  1. 8

    Versuchen, diese 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>

    InformationsquelleAutor Tharaka Arachchige

  2. 1

    Bemerkte ich, dass die class="form-control" ist verantwortlich für den Eingang überspannt die gesamte Breite. Auch Sie sollten entfernen Sie die width='400px' Stil und die Verwendung einer bootstrap-Klasse oder einfach nur machen Sie es größer zu enthalten, die vier Elemente.

    Sehen diese Fiddle

    Da Sie mit Bootstrap 3, die Sie sollten versuchen, diese:

    <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>

    Finden Sie auf der offiziellen bootstrap 3 docs

    InformationsquelleAutor k32y

  3. 0

    Legte es in einem Formular-tag wie diesem

    <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>

    Auch hinzufügen, mehr Breite oder die Taste/text kleiner, so dass alle 3 passen

    InformationsquelleAutor kg_root

  4. 0

    Ihre angegebenen code funktioniert nach deiner Beschreibung. Alle drei button-und text-Feld in der gleichen Zeile. Kann sein, dass du nicht link der bootstrap-Bibliothek richtig. Hier ist der code mit bootstrap link

    <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>

    InformationsquelleAutor emon

Schreibe einen Kommentar