Bootstrap 3网格适用于中小型设备3x3

时间:2014-02-04 23:21:54

标签: css twitter-bootstrap

我试试这段代码,但你觉得不错,是的 我希望这在小型设备上看起来也不错..

 <div class="col-md-4 col-sm-6"> <img src="img/usluge/projektovanje.jpg" class="img-responsive img-service" alt="netbox"><br/>
      <label class="btn-service">designing</label>
    </div>
    <div class="col-md-4  "> <img src="img/usluge/laserskorezanjemetalazoom1.jpg" class="img-responsive img-service"><br/>
      <label class="btn-service">laser Metal Cutting</label>
    </div>
    <div class="col-md-4  "> <img src="img/usluge/cncprobijanjee1.jpg" class="img-responsive img-service"><br/>
      <label class="btn-service">cnc punching</label>
    </div>
    <div class="col-md-4  "> <img src="img/usluge/cnc_savijanje5.jpg" class="img-responsive img-service"><br/>
      <label class="btn-service">CNC BENDING</label>
    </div>
    <div class="col-md-4  "> <img src="img/usluge/robotsko_zavarivanje1.jpg" class="img-responsive img-service"><br/>
      <label class="btn-service">robotic welding</label>
    </div>
    <div class="col-md-4 "> <img src="img/usluge/zavarivanje3.jpg" class="img-responsive img-service"><br/>
      <label class="btn-service">welding</label>
    </div>
    <div class="col-md-4  "> <img src="img/usluge/plastifikacija_4.jpg" class="img-responsive img-service"><br/>
      <label class="btn-service">Coatings</label>
    </div>

这可以吗?或者我需要做更多的事情。我希望在小型,中型和笔记本电脑设备上看起来不错......

2 个答案:

答案 0 :(得分:1)

我建议使用行和容器流体。 点击此处了解有关sizes of grid columnsresponsive images和其他responsive options的更多详情。

还有一个&#34; thumbnail with content&#34;选项!

  <div class="container-fluid">
    <div class="row">
     <div class="col-md-4">1</div>
     <div class="col-md-4">2</div>
     <div class="col-md-4">3</div>
    </div>
    <div class="row">
     <div class="col-md-4">1</div>
     <div class="col-md-4">2</div>
     <div class="col-md-4">3</div>
    </div>
    <div class="row">
     <div class="col-md-4">1</div>
     <div class="col-md-4">2</div>
     <div class="col-md-4">3</div>
    </div>
  </div>

答案 1 :(得分:0)

对于较小的设备,您应该开始使用媒体查询。 这可能就是你要找的东西。