• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage Zwei Elemente nebeneinander

0luca0

Neues Mitglied
Hallo Zusammen :)

Ich habe eine Input Group und ein Dropdown, und möchte diese gerne nebeneinander haben..
Hier ist mein Code:
HTML:
 <div class="input-group">
        <div class="input-group-btn">
          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">All <span class="caret"></span></button>
          <ul class="dropdown-menu">
            <li><a href="#">All</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </div>
        <input type="text" class="form-control" placeholder="Search for...">
        <span class="input-group-btn">
        <button class="btn btn-default" type="button" style="width:100px">Search</button>
      </span>
      </div>

      <div class="dropdown">
        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Add Filter <span class="caret"></span></button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
          <li><a href="#">Name</a></li>
        </ul>
      </div>
(Ich nutze Bootstrap)

Wie kriege ich nun alles auf eine Reihe?

LG Luca
 
Werbung:
Werbung:
In dem du das Grid-Layout von Bootstrap verwendest.
Das habe ich bereits probiert, aber ist suboptimal. Ich möchte das die beiden Elemente zusammen die komplette Row füllen, mit Columns ist das nicht sauber möglich, ausser ich übersehe etwas. (Ausser ich sage dem Dropdown, dass es die gesamte Column füllen soll, was auch nicht sehr schön aussieht.) Und die Breite passt sich der Breite des Dropdowns in der Inputgroup an.

Es ist ja aber keine Navbar? Die Navbar habe ich schon.

Ich denke das funktioniert nicht auf eine schöne Art und Weise.. Ich versuche darum mal was anderes.
 
Zuletzt bearbeitet:
Hallo

Ich denke das funktioniert nicht auf eine schöne Art und Weise

Doch, mit Flexbox. Allerdings ist immer noch nicht so ganz klar was du überhaupt erreichen willst. Im ersten Beitrag schreibst du

Wie kriege ich nun alles auf eine Reihe?

und in deinem zweiten

das die beiden Elemente zusammen die komplette Row füllen

Wobei du Begriffe wie Row und Column außerhalb ihrer üblichen Bedeutung verwendest und dadurch die Kommunikation zusätzlich erschwerst. Damit nimmst du uns jede Chance dir konkret zu helfen.

Mit Flexbox könnte es so aussehen:

http://boratb.bplaced.net/index22.html

Gruss

MrMurphy
 
Zuletzt bearbeitet:
Es ist ja aber keine Navbar? Die Navbar habe ich schon.
Woher sollen wir das wissen? Das Dropdownmenü in dem Codesnippet deutet schließlich darauf hin.

Dann mach' dich halt, wie schon von @Tronjer geantwortet, mit dem Gridsystem vertraut.
Und ziehe (notfalls) auch die Hilfsklassen hinzu.
Sowie:
 
Werbung:
Flexbox
Dies funktioniert aber nur ab IE11, korrekt?

Bzgl. Begrifflichkeiten
Es soll beides in eine Row und zwar nebeneinander? Verstehe ehrlich gesagt nicht wo ich die Begriffe Column und Row falsch verwendet habe...

Ich habe es mittlerweile anderst gelöst und einfach das Layout komplett auf den Kopf geworfen.
Trotzdem Danke.

LG Luca
 
Zurück
Oben