使用常量div宽度w / bootstrap创建响应行

Question

我想使用bootstrap创建一个响应行：

第一张照片：之前（大屏幕） 第二张照片：之后（小屏幕） 容器的宽度应保持不变

任何帮助将不胜感激

亲切的问候

编辑 - 我试过的代码：

<div class="container-fluid"> 
<div class="row"> 
   <div class="col-md-2 col-sm-2"> 
    <div class="chart-wrapper"> 
     <div class="chart-title" style="height:60px;"> TEST </div> 
    <div class="chart-stage"> asp generated chart png </div> 
   <div class="chart-notes"> Comment </div> 
 </div> 
</div>

Answer 1

您可以使用bootstrap网格系统 http://getbootstrap.com/css/#grid

以上项目可以像这样使用

<div class="row">
  <div class="col-xs-12 col-md-4 col-lg-3">.col-xs-12 .col-md-4 col-lg-3</div>
  <div class="col-xs-12 col-md-4 col-lg-3">.col-xs-12 .col-md-4 col-lg-3</div>
  <div class="col-xs-12 col-md-4 col-lg-3">.col-xs-12 .col-md-4 col-lg-3</div>
  <div class="col-xs-12 col-md-4 col-lg-3">.col-xs-12 .col-md-4 col-lg-3</div>
</div>

也可以使用每个div

div{
display:flex
}

Answer 2

您可以使用媒体查询执行此操作： - 首先添加此行      然后使用css类为不同的设备制作不同的块。如下所示。

    <div class="visible-1">
    content for smaller screen//
    </div>
    <div class="visible-3">
    content for small screen//
    </div>

    <div class="visible-4">
    content for Desktop//
    </div>



<style>
    .visible-1{
    @media (max-width: 240px) { more css }
    }

    .visible-3{
    @media (max-width: 480px) { more css }
    }

    .visible-4{
    @media (min-width: 768px) { more css }
    }
</style>

Answer 3

这应该这样做：

  <div class="container-fluid"> 
    <div class="row"> 
       <div class="col-lg-3 col-md-4 col-sm-12 "> 
        <div class="chart-wrapper"> 
         <div class="chart-title" style="height:60px;"> TEST </div> 
        <div class="chart-stage"> asp generated chart png </div> 
       <div class="chart-notes"> Comment </div> 
     </div> 
   </div>
 </div> 
</div>