如何在不破坏桌面版本的情况下混合 Bootstrap 响应式网站中的列? [英] How to mix columns in a Bootstrap responsive website without breaking the desktop version?

问题描述

我正在使用 Bootstrap 构建网站，但遇到响应问题

I'm building a website with Bootstrap and I'm facing a responsivity problem

基本上，我希望网格 1 变成移动网格 2.

I want that grid 1 become mobile 2, basically.

但是如果我开发 mobile 2，我会得到 grid 2，这很糟糕.如果我开发 grid 1，我会得到 mobile 1，这也很糟糕，因为我想在不破坏我的列的情况下将侧边栏元素混合到我的移动版本中

But if I develop mobile 2, i get grid 2 which is bad. If I develop grid 1, I get mobile 1 which is also bad, because I want to mix sidebar elements into my mobile version without breaking my columns

是否有可能在不使用 javascript 严重强迫它的情况下解决这个问题?

Is it possible to solve this without forcing it badly with javascript?

推荐答案

您可以使用 CSS 媒体查询在更宽的屏幕宽度(即大于 768 像素)上将较高的列拉到右侧.

You could use a CSS media query to pull the taller columns to the right on wider screen widths (ie; greater that 768 pixels)..

@media (min-width: 768px) {
  .tall {
      float:right;
  }
}

演示:http://bootply.com/Zkloc3WAtV

这篇关于如何在不破坏桌面版本的情况下混合 Bootstrap 响应式网站中的列?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！