Выравнивание элементов влево и вправо с надлежащей упаковкой

Question

Я новичок в HTML/CSS, я изо всех сил пытаюсь понять, как я могу получить панель инструментов кнопки, чтобы выровнять ее вправо, но затем прекратите плавать вправо (оберните как встроенный, блок будет), когда ширина страницы станет меньше?

В настоящее время я плаваю кнопками справа, чтобы получить выравнивание по правому краю, которое я хочу, но плавать может быть не лучшим образом.

Я мог бы использовать медиа-запросы, но мне было интересно, знает ли кто-нибудь более простой/стандартный способ?

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

Если вы осмотрите элемент, который вы увидите, что это генерируется Bootstrap.

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

Так переопределения, что float:none или left в запросах медиа для маленьких экранов. При необходимости вам нужно будет применить !important.

EDIT

Как указывается в комментариях ниже, это, вероятно, не очень хорошая идея, чтобы переопределить .pull-right класс непосредственно, так как он также используется для других правил, поэтому .this-parent-class .pull-right {...} бы лучше, или не использовать этот класс вообще.

Поскольку вы используете Bootstrap, вы действительно должны принять ухаживание встроенных в гибкой системе сетки, т.е. col-lg-*, col-md-* и col-sm-* и т.д. для вашего макета, есть большая почта here.

Answer 2

Float прекрасно, если вы не хотите их в виде отдельной строки, в этом случае вы можете использовать текст выравнивания прямо на элементе кнопки обертку. Кроме того, перемещение кнопок над текстом заголовка делает обертку заголовком.

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

например: http://jsfiddle.net/47hsddLd/2/

, но что бы это прочитать по-разному для чтения с экрана.

Обратите внимание, что я удалил дисплей: встроенные блоки, так как они нарушают нормальный поток.

Вот решение с медиа-запросов: http://jsfiddle.net/47hsddLd/4/

Answer 3

Похоже, вы хотите это так: http://jsfiddle.net/zsjn7tz8/

Базовый подход является flexbox с flex-wrap: wrap включен, flex:1 на заполняющей пространство элемента, и white-space: nowrap на обоих изгибающих детей.

Обратите внимание, что для некоторых браузеров вам может понадобиться/требуется предварительная обработка CSS или автоопределение, чтобы получить синтаксисы «legacy» и «tweener» flexbox, а также префикс для поставщиков (это горячий беспорядок: настоятельно рекомендуем разрешить инструмент, а не авторинг)