Question

我正在使用Bootstrap 3。

对于我的某个网页，我想col-xs-12使用319px-544px而col-xs-6使用545px-768px ...但这显然不可行，因为{{1} }适用于所有col-xs-。

显然这是在bootstrap 4中解决的，但我的整个应用程序都是为bootstrap 3编写的，直到这一点。

在<768px 和 319px上限制使用相同的列格式非常困难。反正有吗？

Answer 1

以下是实现此目的的两种可能方式：

方法＃01：

转到Customizing Bootstrap页面。
转到Media queries breakpoints部分。
使用您需要的值（@screen-sm）覆盖545px的默认值。
转到Download部分，然后按＆＃34;编译并下载＆＃34; 按钮。

现在，所有col-sm-*网格都将从545px而不是768px开始。

方法＃02：

您需要在自定义css文件中覆盖Bootstrap样式。

@media (min-width: 545px) {
  .col-sm-6 {
    width: 50%;
  }
}

＆＃13;

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

@media (min-width: 545px) {
  .col-sm-6 {
    width: 50%;
  }
}

＆＃13;

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-6">
      <div class="bg-info">
        Column 1
      </div>
    </div>
    <div class="col-xs-12 col-sm-6">
      <div class="bg-info">
        Column 2
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 2

尝试使用此代码

.col-xsm-12{
    float:left;
    position:relative;
	min-height:1px;
	padding-right:15px;
	padding-left:15px
}
}
@media screen and (min-width: 319px) and (min-width: 544px){
.col-xsm-12{
  width:100%;
}
}
@media screen and (min-width: 545px) and (min-width: 767px){
.col-xsm-12{
  width:50%;
 }
}

<div class="col-xsm-12">

如何根据768px以下的屏幕尺寸制作col-xs-12和col-xs-6

2 个答案: