html - 推拉标签来组织不同的复杂布局

转载作者：可可西里更新时间：2023-11-01 13:26:18

我正在处理一个网页，我想在启动响应式媒体查询时组织页面上的不同层次结构。

目前我正在处理 container > row > col-x-y 设置中的元素。正如您将在提供的代码中看到的那样，我有一个实际网站的模型。

目标是随着页面大小的变化，获取这些元素在不同位置的顺序。我设置此代码的方式将显示不同的屏幕尺寸布局。 Here's a fiddle使用下面的代码。

我听说过在 col 标签中使用 Push 和 Pull 的方法，但我不知道我是否完全理解它是如何工作的。所以这是我的问题:

1) 这可能吗？

2) 如果是这样，它能正确地做这个布局吗？

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

.well {
  border: 2px solid black;
}

<div class="container">
  <h2>Items with an * are the ones that move</h2>

  <h3>Smallest screens</h3>
  <div class="row">

    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <div class="well">
        <b>Picture Carousel</b>
      </div>
    </div>

    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <div class="well">
        <b>*Get Help</b>
      </div>
    </div>

    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <div class="well">
        <b>*Current Status</b>
      </div>
    </div>

    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <div class="well">
        <b>Column item 1</b>
      </div>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <div class="well">
        <b>Column item 2</b>
      </div>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <div class="well">
        <b>Column item 3</b>
      </div>
    </div>

    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <div class="well">
        <b>Calendar Items Static Carousel</b>
      </div>
    </div>

    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <div class="well">
        <b>*Stay Connected</b>
      </div>
    </div>

  </div>


  <h3>Small screens</h3>
  <div class="row">

    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <div class="well">
        <b>Picture Carousel</b>
      </div>
    </div>

    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <div class="well">
        <b>*Get Help</b>
      </div>
    </div>

    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <div class="well">
        <b>*Current Status</b>
      </div>
    </div>

    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
      <div class="well">
        <b>Column item 1</b>
      </div>
    </div>
    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
      <div class="well">
        <b>Column item 2</b>
      </div>
    </div>
    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
      <div class="well">
        <b>Column item 3</b>
      </div>
    </div>

    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
      <div class="well">
        <b>Calendar Items Static Carousel</b>
      </div>
    </div>

    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
      <div class="well">
        <b>*Stay Connected</b>
      </div>
    </div>

  </div>
  

  <h3>Medium and Large Screens screens</h3>
  <div class="row">

    <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
      <div class="well">
        <b>Picture Carousel</b>
      </div>
    </div>

    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
      <div class="well">
        <b>*Current Status</b>
      </div>
    </div>

    <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
      <div class="well">
        <b>*Get Help</b>
      </div>
    </div>

    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
      <div class="well">
        <b>*Stay Connected</b>
      </div>
    </div>

    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
      <div class="well">
        <b>Column item 1</b>
      </div>
    </div>
    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
      <div class="well">
        <b>Column item 2</b>
      </div>
    </div>
    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
      <div class="well">
        <b>Column item 3</b>
      </div>
    </div>

    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <div class="well">
        <b>Calendar Items Static Carousel</b>
      </div>
    </div>

  </div>
</div>

非常感谢所有帮助!

最佳答案

Bootstrap 的三种不同布局

我已经复制了最后一个 block 。 (它是红色的。)
我将第一 block 和第二 block 包裹在一个大块中。并将第三个 block 和最后一个 block 的副本包装在另一个大块中。 (大块是蓝色的。)

Three different layouts by Bootstrap

请检查结果:https://jsfiddle.net/glebkema/2y08thn5/

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

.well {
  border: 2px solid black;
}
.well-red {
  background: #fcc;
}
.well-blue {
  background: #ccf;
  padding: 4px 4px 0;
  margin: -4px -4px 8px;
}

<div class="container">
  <h2>Items with an * are the ones that move
  <br>The red block is duplicated</h2>

  <h3>Screen is 
    <span class="visible-xs-inline">smallest</span>
    <span class="visible-sm-inline">small</span>
    <span class="visible-md-inline">medium</span>
    <span class="visible-lg-inline">large</span>
  </h3>

  <div class="row">

    <div class="col-xs-12 col-md-8">
      <div class="well well-blue">
        <div class="row">
          <div class="col-xs-12">
            <div class="well">
              <b>Picture Carousel</b>
            </div>
          </div>
          <div class="col-xs-12">
            <div class="well">
              <b>*Get Help</b>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="col-xs-12 col-md-4">
      <div class="well well-blue">
        <div class="row">
          <div class="col-xs-12">
            <div class="well">
              <b>*Current Status</b>
            </div>
          </div>
          <div class="col-md-12 hidden-xs hidden-sm">
            <div class="well well-red">
              <b>*Stay Connected</b>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="col-xs-12 col-sm-4">
      <div class="well">
        <b>Column item 1</b>
      </div>
    </div>
    <div class="col-xs-12 col-sm-4">
      <div class="well">
        <b>Column item 2</b>
      </div>
    </div>
    <div class="col-xs-12 col-sm-4">
      <div class="well">
        <b>Column item 3</b>
      </div>
    </div>

    <div class="col-xs-12 col-sm-6 col-md-12">
      <div class="well">
        <b>Calendar Items Static Carousel</b>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 visible-xs visible-sm">
      <div class="well well-red">
        <b>*Stay Connected</b>
      </div>
    </div>

  </div>
</div>

更新。通过 jQuery 复制最后一个 block

您只能编辑一个 block ，然后通过 jQuery 克隆它。

https://jsfiddle.net/glebkema/m1egqbm0/

$(document).ready(function() {
  $( '#duplicate-this-block' ).clone().appendTo( "#put-a-duplicate-here" ).attr( 'class', 'col-md-12 hidden-xs hidden-sm' );
});

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

.well {
  border: 2px solid black;
}
.well-red {
  background: #fcc;
}
.well-blue {
  background: #ccf;
  padding: 4px 4px 0;
  margin: -4px -4px 8px;
}

<div class="container">
  <h2>Items with an * are the ones that move
  <br>The red block is duplicated by jQuery</h2>

  <h3>Screen is 
    <span class="visible-xs-inline">smallest</span>
    <span class="visible-sm-inline">small</span>
    <span class="visible-md-inline">medium</span>
    <span class="visible-lg-inline">large</span>
  </h3>

  <div class="row">

    <div class="col-xs-12 col-md-8">
      <div class="well well-blue">
        <div class="row">
          <div class="col-xs-12">
            <div class="well">
              <b>Picture Carousel</b>
            </div>
          </div>
          <div class="col-xs-12">
            <div class="well">
              <b>*Get Help</b>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="col-xs-12 col-md-4">
      <div class="well well-blue">
        <div id="put-a-duplicate-here" class="row">
          <div class="col-xs-12">
            <div class="well">
              <b>*Current Status</b>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="col-xs-12 col-sm-4">
      <div class="well">
        <b>Column item 1</b>
      </div>
    </div>
    <div class="col-xs-12 col-sm-4">
      <div class="well">
        <b>Column item 2</b>
      </div>
    </div>
    <div class="col-xs-12 col-sm-4">
      <div class="well">
        <b>Column item 3</b>
      </div>
    </div>

    <div class="col-xs-12 col-sm-6 col-md-12">
      <div class="well">
        <b>Calendar Items Static Carousel</b>
      </div>
    </div>
    <div id="duplicate-this-block" class="col-xs-12 col-sm-6 visible-xs visible-sm">
      <div class="well well-red">
        <b>*Stay Connected</b>
      </div>
    </div>

  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

关于html - 推拉标签来组织不同的复杂布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37634605/

文章推荐： php - Laravel Eloquent - 关系中的 firstOrCreate()

文章推荐： windows - 我们可以从 ExitInstance 调用 FreeLibrary

文章推荐： windows - 如何在rasdial中保存密码？

Ajax - 推拉？
我想了解 Ajax 推拉概念。如果有任何教程或书籍，我将不胜感激任何建议。最佳答案这是一个不错的 A Comparison of Push and PullTechniques for AJAX为
两个远程存储库之间的 Mercurial 推拉
是否可以从一个远程存储库推送到另一个远程存储库？我有一个案例，我将本地更改推送到远程集成存储库。一旦获得批准，我希望将集成存储库推送到发布存储库(我将从中构建我的发布)。这在技术上可行吗？编辑:
css - 推拉 Bootstrap 网格
所需的网格 xs 屏幕到 sm 我正在尝试对其他网格重新排序，以便在蓝色部分旁边放置一个嵌套网格。这是我现在的代码，但是推拉会导致橙色方 block 消失。 Slider QuickHelp
html - 使用 Bootstrap 推拉
我刚刚将 Bootstrap 放到我的网站上，并且一直在测试它。我一直在尝试使用那里的网格系统，但遇到了一个小问题。所以在我的网站上我有一个标题，它看起来像这样“按钮 1-6 | Logo | 登录”
html - Bootstrap v4 推拉
所以我已经阅读了这个主题:Column order manipulation using col-lg-push and col-lg-pull in Twitter Bootstrap 3 但是我还
html - Bootstrap 推拉 3 列
我必须重新排列小屏幕中按以下顺序排列的列 1,2,3 在小屏幕中应显示为 3,1,2。它适用于两个，但我不确定如何使其适用于具有以下结构的三列 Push and Pull Resize t
docker - nginx 后面的 docker 注册表错误，推拉
我正在尝试创建一个 docker 注册表并且发生了一些问题，我无法执行推和拉等操作，它遵循我的环境设置: # docker container run -d -p 5000:5000 --name r
html - 为什么我的 Bootstrap 推拉 div 不起作用？
对于 col-md 和更高级别，我希望有 2 个 div besides，同时对于，它们above col-sm 及更低。所以我尝试使用文档中提到的推拉功能，但不知何故它不起作用。我想要做的是让 R

可可西里

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 推拉标签来组织不同的复杂布局

Bootstrap 的三种不同布局

更新。通过 jQuery 复制最后一个 block