html – Bootstrap推拉问题

概述我对Bootstrap很新,并且在使用push和pull进行元素对齐时会遇到问题.这是小屏幕尺寸(xs及以上)的理想结果： -------------------| Search |-------------------| Directory |-------------------| Preferences |------------------ 我对bootstrap很新,并且在使用push和pull进行元素对齐时会遇到问题.这是小屏幕尺寸(xs及以上)的理想结果：

-------------------|     Search      |-------------------|    Directory    |-------------------|   Preferences   |-------------------

然后对于所有尺寸为md及以上的屏幕,我想要这个布局：

-------------------|  Search  | Pref.|-------------------|    Directory    |-------------------

我已经读过bootstrap布局应该是移动优先设计的,所以我的代码如下：

.a {  background-color: green;}.b {  background-color: blue;}.c {  background-color: red;}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/CSS/bootstrap.min.CSS" rel="stylesheet" /><div >  <div >    <div >Search</div>    <div >Directory</div>    <div >Preferences</div>  </div></div>

这是我的代码Bootply.它按照预期的方式用于小屏幕,每个div以正确的顺序堆叠,但我无法弄清楚为什么推拉只是左右移动元素,而不是像我想的那样加入它们(即使我弄乱了)用于推/拉的列数.谁能指出我正确的方向？

解决方法 正如前面提到的那样,只使用bootstrap类就无法做到这一点.推,拉和偏移只会水平移动元素,而不是垂直移位.

但是,如果您的目标是支持它的浏览器,则可以使用flexBox和媒体查询的组合来实现此重新排序,而无需复制内容.

支持细分：http://caniuse.com/#feat=flexbox

首先,删除push和pull类并将列包装在div中.

<div >  <div >    <div >      <div >Search</div>      <div >Directory</div>      <div >Preferences</div>    </div>  </div></div>

其次,使用一些CSS规则来设置包装器div的显示.

.flexBox{    display:flex;    flex-wrap:wrap;}

最后,设置一个媒体查询,一旦宽度高于xs断点(768px),它将重新排序元素

@media all and ( min-wIDth: 768px ) {    .flexBox .a { order:1; }    .flexBox .b { order:3; }    .flexBox .c { order:2; }}

完整的例子如下.

.a { background-color:green; }.b { background-color:blue; }.c { background-color:red; }.flexBox {  display:flex;  flex-wrap:wrap;}@media all and ( min-wIDth: 768px ) {  .flexBox .a { order:1; }  .flexBox .b { order:3; }  .flexBox .c { order:2; }}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/CSS/bootstrap.min.CSS" rel="stylesheet" /><div >  <div >    <div >      <div >Search</div>      <div >Directory</div>      <div >Preferences</div>    </div>  </div></div>

总结

以上是内存溢出为你收集整理的html – Bootstrap推/拉问题全部内容，希望文章能够帮你解决html – Bootstrap推/拉问题所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。