Question

我是HTML / CSS的新手，我正在努力弄清楚如何让按钮工具栏向右对齐，但是当页面宽度得到时，然后停止向右浮动（环绕块作为内联块）小吗？

目前，我正在向右浮动按钮以获得我想要的右对齐效果，但浮动可能不是最佳方式。

我可以使用媒体查询，但我想知道是否有人知道更直接/标准的方式？

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

修改

正如下面的评论所示，直接覆盖.pull-right类可能不是一个好主意，因为它也用于其他规则，因此.this-parent-class .pull-right {...}会更好，或者根本不使用那个课程。

由于你正在使用Bootstrap，你真的应该采用内置的响应式网格系统的进步，即col-lg-*，col-md-*和col-sm-*等为你的布局，那里是一篇很棒的帖子here。

Answer 2

Float很好，除非你想把它们作为一个单独的行，在这种情况下你可以在按钮包装元素上使用text-align。将按钮移动到标题文本上方也会使标题文本换行。

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

但这会使屏幕阅读器的阅读方式不同。

请注意我删除了显示：inline-blocks，因为那些会破坏正常流程。

以下是媒体查询的解决方案： http://jsfiddle.net/47hsddLd/4/

Answer 3

听起来你想要这样：http://jsfiddle.net/zsjn7tz8/

基本方法是flexbox开启flex-wrap: wrap，空格填充元素为flex:1，灵活儿童为white-space: nowrap。

请注意，对于某些浏览器，您可能需要/需要CSS预处理或自动修复以使“遗留”和“tweener”Flexbox语法正常工作，加上供应商前缀（这是一个热点：建议让工具执行，而不是创作自己）

左右对齐正确的包装

3 个答案: