Question

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

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

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

Answer 1

我建议使用行和容器流体。点击此处了解有关sizes of grid columns，responsive 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>

Answer 2

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

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

2 个答案: