Fatal编程技术网
  • image/
  • Image bootstrap中的响应图像/框不'；行不通

Image bootstrap中的响应图像/框不'；行不通

image twitter-bootstrap responsive-design

Image bootstrap中的响应图像/框不'；行不通,image,twitter-bootstrap,responsive-design,Image,Twitter Bootstrap,Responsive Design,我想把4个盒子并排放在一起。当我调整屏幕大小时，我希望框在屏幕区域中变成流体。我在第一行有A到D框，在第二行有A1到D1框（在大屏幕中，一行有4个框，在中，3个框，在小框中，2个框等等），当我调整屏幕大小时，我不能将A1框放在A框下面。它总是向右走 你能帮我吗？ 谢谢 以下是我的html代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <ti

我想把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>
如果我理解了你的意图，那么你就失去了整个网格。您应该首先使用div class
contianer
或
容器流体打开主
bootstrap
容器，然后在容器内为前4个框a-D打开一个
行
类，然后为A1-D1打开第二个
行
类。行中的每个框都有一个class
col-md-3
read
bootstrap的
文档，以便更好地理解可用的大小。下面是第一行方框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>




方框A
方框B
方框C
方框D

使用class
容器将所有元素包装在根父级
div
中
是，@andre3wap。我忘了带“行”的标签了。非常感谢你。

    <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>