为什么我的三栏简介不水平分布而是垂直分布的

来源:3-7 三栏简介布局

慕丝1033313

2017-07-01 23:45

<div class="container summary">

<div class="row" 

id="summary-container">

<div class="col-md-4">

<img class="img-circle" src="img/chrome-logo-small.jpg" alt="chrome">

           <h2>Chrome</h2>

           <p>Google Chrome,又称Google浏览器,是一个由Google(谷歌)公司开发的网页浏览器。</p>

           <p><a class="btn btn-default" href="#" role="button">点我下载</a></p>

</div>

<div class="col-md-4">

<img class="img-circle" src="img/firefox-logo-small.jpg" alt="firefox">

<h2>firefox</h2>

       <p>Mozilla Firefox,中文名通常称为“火狐”或“火狐浏览器”,是一个开源网页浏览器。</p>

           <p><a class="btn btn-default" href="#" role="button">点我下载</a></p>

</div>

<div class="col-md-4">

<img class="img-circle" src="img/safari-logo-small.jpg" alt="safari">

<h2>safari </h2>

<p>Safari,是苹果计算机的最新操作系统Mac OS X中的浏览器。</p>

           <p><a class="btn btn-default" href="#" role="button">点我下载</a></p>

</div>

</div>

</div>


写回答 关注

2回答

  • java初级开发
    2019-09-20 15:04:53

    设备屏幕大小的问题,我刚才做了也遇见这样的问题了。将class改成适合的就行了

    sm 代表小型设备  屏幕宽度<=750px   

    md 代表中型设备  屏幕宽度<=970px

    如果这个属性选择与你的电脑屏幕尺寸不符合,就会由水平排列变成垂直排列


  • 猴犀利的7号
    2017-07-02 07:37:23

    我将你的代码用浏览器打开看过 没问题,这段代码是没问题的,那可能是没有你屏幕宽度小于992px吧,或者是bootstrap的css、js没引用好

    猴犀利的7号 回复慕丝1033...

    就实现课程上这一段效果,我是没有另外给宽度和浮动。因为col-md-4这个是按照百分比来控制宽度了的,不用另外写吧

    2017-07-03 07:41:33

    共 4 条回复 >

基于bootstrap的网页开发

Bootstrap框架的基础教程,学会用Bootstrap前端框架搭建网页

187668 学习 · 734 问题

查看课程

相似问题