Bootstrap pull-right和移动设备

Question

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

使用移动设备时，是否可以将标题下方的按钮设置为？例如：

Answer 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），并且设备宽度屏幕宽度上的内联状态高于

Answer 2

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

中

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

有关详细信息，请参阅：Responsive Grids: Bootstrap

Answer 3

Standart bootstrap禁用移动视图上的pull-classes。您需要手动添加到您的css下一个代码：

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

Answer 4

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

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;