Richten Sie Elemente links und rechts mit richtiger Umhüllung aus

Question

Ich bin neu in HTML/CSS, ich bin schwer zu finden, wie ich eine Symbolleiste auf der rechten Seite ausrichten kann, aber dann aufhören zu schweben rechts (als Inline- Block würde) wenn die Seitenbreite kleiner wird?

Zur Zeit schwebe ich die Tasten rechts, um den rechtsgerichteten Effekt zu erhalten, den ich möchte, aber Floating ist vielleicht nicht der beste Weg.

Ich könnte Medienabfragen verwenden, aber ich frage mich, ob jemand eine direkter/Standard Weg kennt?

http://jsfiddle.net/47hsddLd

<div style="margin: 60px 20px 60px 20px;"> 
    <div style="display:inline-block"> 
    <h3>Some kind of page title</h3><br /> 
    </div> 
    <div class="btn-group pull-right" role="group" aria-label="User Categories" style="display:inline-block"> 
    <button type="button" class="btn btn-default-grey btn-sm storyFilter" data-storyfilter-category="ReadLater" data-results-target="#storyList" data-toggle="tooltip" data-placement="bottom" title="Read Later"> 
     <i style="margin-top:4px" class="glyphicon glyphicon-bookmark" aria-hidden="true"></i> 
    </button> 
    <button type="button" class="btn btn-default-grey btn-sm storyFilter" data-storyfilter-category="PlanToUse" data-results-target="#storyList" data-toggle="tooltip" data-placement="bottom" title="Plan To Use"> 
     <i style="margin-top:4px" class="glyphicon glyphicon-pushpin" aria-hidden="true"></i> 
    </button> 
    <button type="button" class="btn btn-default-grey btn-sm storyFilter" data-storyfilter-category="Used" data-results-target="#storyList" data-toggle="tooltip" data-placement="bottom" title="Used"> 
     <i style="margin-top:4px" class="glyphicon glyphicon-check" aria-hidden="true"></i> 
    </button> 
    <button type="button" class="btn btn-default-grey btn-sm storyFilter" data-storyfilter-category="Submitted" data-results-target="#storyList" data-toggle="tooltip" data-placement="bottom" title="My Stories"> 
     <i style="margin-top:4px" class="glyphicon glyphicon-list-alt" aria-hidden="true"></i> 
    </button> 
    </div> 
</div> 

Answer 1

Wenn Sie das Element überprüfen Sie dies durch Bootstrap erzeugt sehen.

.pull-right { 
    float: right !important; 
} 

überschreiben, damit zu float:none oder left in den Medien-Anfragen für kleine Bildschirme. Sie müssen !important bei Bedarf auch anwenden.

EDIT

Wie unten in den Kommentaren vorgeschlagen, es ist wahrscheinlich keine gute Idee .pull-right Klasse direkt außer Kraft zu setzen, wie es auch für andere Regeln können auch verwendet werden, so .this-parent-class .pull-right {...} besser wäre, oder nicht verwenden diese Klasse überhaupt.

Da Sie mit Bootstrap, die Sie wirklich die Fortschritte des in ansprechendem Grid-System aufgebaut nehmen sollen, das heißt col-lg-*, col-md-* und col-sm-* usw. für Ihr Layout gibt es einen großen Beitrag here.

Answer 2

Float ist in Ordnung, wenn Sie sie als separate Zeile wollen, in diesem Fall Sie text-align rechts auf dem Tasten-Wrapper-Element verwenden können. Durch Verschieben der Schaltflächen über den Titeltext wird der Titeltext umbrochen.

<div style="margin: 60px 20px 60px 20px;"> 
    <div class="btn-group pull-right" role="group" aria-label="User Categories" style="margin-left: 10px"> 
    <button type="button" class="btn btn-default-grey btn-sm storyFilter" data-storyfilter-category="ReadLater" data-results-target="#storyList" data-toggle="tooltip" data-placement="bottom" title="Read Later"> 
     <i style="margin-top:4px" class="glyphicon glyphicon-bookmark" aria-hidden="true"></i> 
    </button> 
    <button type="button" class="btn btn-default-grey btn-sm storyFilter" data-storyfilter-category="PlanToUse" data-results-target="#storyList" data-toggle="tooltip" data-placement="bottom" title="Plan To Use"> 
     <i style="margin-top:4px" class="glyphicon glyphicon-pushpin" aria-hidden="true"></i> 
    </button> 
    <button type="button" class="btn btn-default-grey btn-sm storyFilter" data-storyfilter-category="Used" data-results-target="#storyList" data-toggle="tooltip" data-placement="bottom" title="Used"> 
     <i style="margin-top:4px" class="glyphicon glyphicon-check" aria-hidden="true"></i> 
    </button> 
    <button type="button" class="btn btn-default-grey btn-sm storyFilter" data-storyfilter-category="Submitted" data-results-target="#storyList" data-toggle="tooltip" data-placement="bottom" title="My Stories"> 
     <i style="margin-top:4px" class="glyphicon glyphicon-list-alt" aria-hidden="true"></i> 
    </button> 
    </div> 
    <div> 
    <h3> 
     Some kind of page title 
    </h3> 
    <br /> 
    </div> 

</div> 

zB: http://jsfiddle.net/47hsddLd/2/

aber das wäre es anders für Screenreader machen lesen.

Bitte beachten Sie, dass ich die Anzeige entfernt habe: Inline-Blöcke, da diese den normalen Fluss unterbrechen.

Hier ist eine Lösung mit Medien-Anfragen: http://jsfiddle.net/47hsddLd/4/

Answer 3

Klingt wie Sie es so wollen: http://jsfiddle.net/zsjn7tz8/

Grundansatz ist flexbox mit flex-wrap: wrap eingeschaltet, flex:1 auf dem raumfüllenden Element und white-space: nowrap auf beiden flex Kinder. Beachten Sie, dass Sie für einige Browser eine CSS-Vorverarbeitung oder Autoprefixing benötigen, um "Legacy" - und "Tweener" -Flexbox-Syntaxen zu verwenden, plus Herstellerpräfixierung (es ist ein heißes Durcheinander: raten Sie einem Tool, es nicht zu tun) Authoring selbst)