Question

我在下面的代码中有4个框，默认为中等大小，所有4个框都在一行中。没关系。在x-小尺寸（移动）中，所有4个盒子都可以使用。

但小尺寸（＆gt; 768px＆amp;＆lt; 1000px）：我如何制作第1行的Box1，Box2和第2行的Box3，Box4

＆＃13;

SELECT food.id,
    food.description,
    food.tags,
    food.foodGroup,
    food.manufacturerName,
    food.version
FROM food
WHERE food.id in ('14026','14145')

＆＃13;

$(document).ready(function(){
$('head').append('<meta name="viewport" content="width=1000px, initial-scale=1"/>');
});

＆＃13;

.box {
border:solid 1px red;
}
.box3,.box4 {
background:grey;
}

＆＃13;

Answer 1

由于您需要检查特定宽度，因此需要使用Media Queries。不确定这是否有效，但你可以从这个

开始

@media all and (max-width: 1000px) {
    #col4_1,
    #col4_2,
    #col4_3,
    #col4_4
    {
        width: 50%;
}

Answer 2

尝试两个部分：一个可见＆＃34; xtra-small＆＃34;另一个可以看到＆＃34;小＆＃34;屏

<div class="container">
  <div class="row" hidden-sm>
    <div class="box col-sm-6 col-md-4" id="col4_1">Box 1</div>
    <div class="col-sm-6 col-md-8">
      <div class="row">
        <div class="box col-sm-12 col-md-4" id="col4_2">Box 2</div>
        <div class="box box3 col-sm-12 col-md-4" id="col4_3">Box 3</div>
        <div class="box box4 col-sm-12 col-md-4" id="col4_4">Box 4</div>
      </div>
    </div>
  </div>

  <div class="row" hidden-xs>
    <div class="row">
        <div class="box col-sm-6" id="col4_1">Box 1</div>
        <div class="box col-sm-6">Box 2</div>
    </div
    <div class="row">
        <div class="box box3 col-sm-6" id="col4_3">Box 3</div>
        <div class="box box4 col-sm-6" id="col4_4">Box 4</div>
    </div>
  </div>
</div>

Answer 3

你能看一下docs。

一行有12列。如果你让一个盒子占据：

12列，每个方框将占据一行。
6列，每行2个盒子。
4列，每行3盒。
3列，你将连续获得所有4个方框。

例如，对于中画面，您可以将每个框 col-md-6 设置为中等屏幕，每行将获得2个框。

来自docs：

.col-xs-是额外的小
.col-sm-适合小型
.col-md-适用于中等

请将所有方框放在同一行

$(document).ready(function(){
$('head').append('<meta name="viewport" content="width=1000px, initial-scale=1"/>');
});

.box {
border:solid 1px red;
}
.box3,.box4 {
background:grey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="box col-xs-12 col-sm-6 col-md-3" id="col4_1">Box 1</div>
    <div class="box col-xs-12 col-sm-6 col-md-3" id="col4_2">Box 2</div>
    <div class="box col-xs-12 col-sm-6 col-md-3 box3 " id="col4_3">Box 3</div>
    <div class="box col-xs-12 col-sm-6 col-md-3 box4" id="col4_4">Box 4</div>
    </div>
  </div>
</div>

如何在bootstrap3中打破cols

3 个答案: