Bootstrap 3推/拉问题？ [复制]

Posted

技术标签:

【中文标题】Bootstrap 3推/拉问题？ [复制]【英文标题】：Bootstrap 3 push/pull issue? [duplicate] 【发布时间】：2019-12-11 05:15:34 【问题描述】：

我正在尝试了解有关推/拉的更多信息，但遇到了一些问题。我有 2 个 div，当屏幕尺寸为中等及以下时，如何让正确的 div 保持在顶部。

这是demo

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="main-div">
    <div class="row">
      <div class="col-lg-6 col-md-12 lef-div">
        <h4>Number1 : Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
          book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
          with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</h4>
      </div>
      <div class="col-lg-6 col-md-12 col-xs-12 right-div">
        <h4>Number2 : Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
          book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
          with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</h4>
      </div>
    </div>
  </div>
</div>

感谢大家的帮助。

【问题讨论】：

我相信这可能是您想要的？ ***.com/questions/20171408/… 您是否受限于 BS3？因为 BS4 使用 flexbox 并且有了它，实现您正在寻找的东西相当简单。 @jakelovelock 那篇文章帮助了我。谢谢。 @AnuragSrivastava 不幸的是，是的。我被BS3困住了。不过不用担心，它现在可以工作了。 【参考方案1】： 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
  <div class="container">
    <div class="main-div">
      <div class="row">
        <div class="col-lg-6 col-md-12 col-lg-push-6">
          <h4>Number2 : Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
              book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
              with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</h4>
          </div>
        <div class="col-lg-6 col-md-12 col-xs-12 col-lg-pull-6">
          <h4>Number1 : Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
            book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
            with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</h4>
        </div>
      </div>
    </div>
  </div>
  
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

在col-*-12 上保留您想首先保留的顺序总是更好。侧边拉或推比向上推更容易

在你想推的 div 上使用 col-*-push-*，在另一边你想拉的 Dive 上使用 col-*-pull-*。

通过此链接参考https://www.w3schools.com/bootstrap/bootstrap_grid_examples.asp

【讨论】：

以上是关于Bootstrap 3推/拉问题？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章

Bootstrap 3底部垂直对齐图像并链接与链接拉右

从 Bootstrap 3 迁移到 Bootstrap 4？ [关闭]

ZeroMQ/ZMQ 推/拉模式的用处

直播-拉流和推流怎么设置？

吴裕雄 Bootstrap 前端框架开发——Bootstrap 图片

吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版：标题