Question

我想并排放4个盒子。当我调整屏幕大小时，我希望盒子在屏幕区域变得流畅。我在第一行有A到D的盒子，在第二行有A1到D1（大屏幕，连续4个盒子，中等，3个，小，2个......）当我调整屏幕大小时不能把A1盒子放在A盒子下面。它总是向右走。

你能帮帮我吗？感谢。

这是我的HTML代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Bootstrap for Web Design</title>
    <meta name="description" content="A Tuts+ course">

    <!-- Mobile Specific Meta -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

    <!-- Custom CSS -->
    <link rel="stylesheet" type="text/css" href="css/custom.css">

  </head>
  <body>

<div class="content">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="events-box"><img src="images/evento1.jpg"/>
<div class="categoria">A</div>
<div class="events-name">DJ Smart Prec Tour 2015</div>
</div>
</div>



<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="events-box"><img src="images/evento2.jpg"/>
<div class="categoria">B</div>
</div>
</div>


<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="events-box"><img src="images/evento3.jpg"/>
<div class="categoria">C</div>
</div>
</div>


<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="events-box"><img src="images/evento4.jpg"/>
<div class="categoria">D</div>
</div>
</div>


<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="events-box"><img src="images/evento1.jpg"/>
<div class="categoria">A1</div>
<div class="events-name">DJ Smart Prec Tour 2015</div>
</div>
</div>



<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="events-box"><img src="images/evento2.jpg"/>
<div class="categoria">B1</div>
</div>
</div>


<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="events-box"><img src="images/evento3.jpg"/>
<div class="categoria">C1</div>
</div>
</div>


<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="events-box"><img src="images/evento4.jpg"/>
<div class="categoria">D1</div>
</div>
</div>


</div>
</body>
</html>

和我的css：

.content{
    max-width:1130px;
    margin:0 auto;

    }

.events-box{
    background:#fff;
    border: 1px solid #CCC;
    max-width:300px;
    height:100%;
    margin:0 auto;
    margin-bottom:20px;
    box-shadow: 0px 0px 8px #888888;
    padding:20px;
    }

.events-box img {
    z-index: 30;
    max-width:200px;
    height:auto;
}

.categoria{
    color:white;
    background:#333c4e;
    font-size:15px;
    text-transform:uppercase;
    font-weight:bold;
    max-width:200px;
    margin: 0 auto;
    margin-top:2px;
    }

.events-name{
    font-size:20px;
    font-weight:bold;
    text-align:left;
    padding-left:5px;
    margin-top:10px;

    }

Answer 1

如果我抓住了你的意图，那么你就会把整个网格都放在一边。您应首先使用div class bootstrap或contianer打开主container-fluid contianer，然后在容器中为前4个方框AD打开row类，然后再打开A1-D1的row等级。并且该行中的每个框都有一个col-md-3个类bootstrap's文档，以便更好地了解可用的大小。下面是带有方框A-D的第一行的示例。如果我错过了解您的问题，请告诉我。

    <div class="container-fluid">
       <div class="row">
          <div class="col-md-3">Box A</div>
          <div class="col-md-3">Box B</div>
          <div class="col-md-3">Box C</div>
         <div class="col-md-3">Box D</div>
      </div>
   </div>

引导程序中的响应图像/框不起作用

1 个答案: