Bootstrap 右拉和移动设备 [重复]答案

【问题标题】：Bootstrap pull-right and mobile devices [duplicate]Bootstrap 右拉和移动设备 [重复]
【发布时间】：2015-10-03 00:47:33
【问题描述】：

我有<h1>，里面有<div class="pull-right">，其中包含与网站标题在同一水平线上的按钮。

<div class="row">
    <div class="col-md-12">
        <h1>
            Title
            <div class="pull-right">
                <a href="#" class="btn btn-default">...</a>
                <a href="#" class="btn btn-default">...</a>
                <a href="#" class="btn btn-default">...</a>
            </div>
        </h1>
    </div>
</div>

是否可以在使用移动设备时获得标题下方的按钮？例如：

【问题讨论】：

使用了正确的引导程序
这里你有非常相似的问题。 stackoverflow.com/questions/19404861/…
你不能（或者说不应该）在 H1 中嵌套一个 div。

标签： html css twitter-bootstrap

【解决方案1】：

不要这样做，因为这些按钮不是您的 title 的一部分，这会带来一些 SEO 缺陷（搜索引擎算法使用 <h1> 元素的内容作为您页面上的第一级标题）。而是这样做：

@media screen and (min-width: 1100px){ 
  .pull-right{
    display:inline-block;
  }
}

<div class="row">
    <div class="col-md-12">
        <h1>Title</h1><!--
        --><div class="pull-right">
            <a href="#" class="btn btn-default">...</a>
            <a href="#" class="btn btn-default">...</a>
            <a href="#" class="btn btn-default">...</a>
        </div>
    </div>
</div>

通过这种方式，您可以在移动设备上获得所需的输出（屏幕宽度低于 1100px），并且在设备宽度屏幕宽度高于该宽度的设备上获得内联状态

【讨论】：

感谢您提供有关搜索引擎的信息。这就是我要找的东西！
欢迎您。从现在开始尝试在您的设计中考虑 SEO

【解决方案2】：

首先，您不能将div 嵌套在h1 中。其次，为什么不正确使用网格系统？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<div class="row">
  <div class="col-xs-12 col-md-6">
    <h1>Title</h1>
  </div>
  <div class="col-xs-12 col-md-6">
    <div class="pull-right">
      <a href="#" class="btn btn-default">...</a>
      <a href="#" class="btn btn-default">...</a>
      <a href="#" class="btn btn-default">...</a>
    </div>
  </div>
</div>
</div>

【讨论】：

【解决方案3】：

您可以将标题包含在 col-sm-12 col-md-5 中。

这将确保在小型设备上，标题行占据整个宽度，从而移动标题 div 下方的按钮。

欲了解更多信息，请参阅：Responsive Grids: Bootstrap

【讨论】：

【解决方案4】：

标准引导程序禁用移动视图上的拉类。您需要手动添加到您的 css 下一个代码：

@media(max-width:769px) {
  .pull-right {
     float:right!important;
  }
  .pull-left {
     float:left!important;
  }
}

【讨论】：