文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何使用引导网格系统制作div/映像

问如何使用引导网格系统制作div/映像
EN

Stack Overflow用户
提问于 2018-03-14 08:58:38
回答 3查看 92关注 0票数 0

我需要在引导3中制作这个div，如图像所示.我需要在一行中显示4个图标/图像，在另一行中以较小的屏幕/移动视图显示另4个图标。我不知道代码中有任何错误。如图所示，请帮我把这个做好。

代码语言：javascript
复制
<section class="container-fluid">
    <div class="row" style="background-color:#034ea2;">
       <div class="col-md-2"></div>
        <div class="col-md-1 text-center ">
            
            <div class="im1">
                <img src="/images/speaker.png" alt="1" class="siz">

            </div>
            <div class="textt">
                <h6>Sound insultion</h6>
            </div>
            
        </div>
        <div class="col-md-1 text-center" >
            <div class="im1">
                <img src="/images/renewable-energy.png" alt="1" class="siz">

            </div>
            <div class="textt">
                <h6>Save energy</h6>
            </div>
        </div>
        <div class="col-md-1 text-center">
            <div class="im1">
                <img src="/images/window.png" alt="1" class="siz">

            </div>
            <div class="textt">
                <h6>Prevent Dust Buildup</h6>
            </div>
        </div>
        <div class="col-md-1 text-center">
            <div class="im1">
                <img src="/images/stormy.png" alt="1" class="siz">

            </div>
            <div class="textt">
                <h6>Storm Resistant</h6>
            </div>
        </div>
        <div class="col-md-1 text-center">
            <div class="im1">
                <img src="/images/hotel-elevator.png" alt="1" class="siz">

            </div>
            <div class="textt">
                <h6>Elegant Looks</h6>
            </div>
        </div>
        <div class="col-md-1 text-center">
            <div class="im1">
                <img src="/images/umb.png" alt="1" class="siz">

            </div>
            <div class="textt">
                <h6>Blocks Seepage</h6>
            </div>
        </div>
        <div class="col-md-1 text-center">
            <div class="im1">
                <img src="/images/sun.png" alt="1" class="siz">

            </div>
            <div class="textt">
                <h6>Thermal Insulation</h6>
            </div>
        </div>
        <div class="col-md-1 text-center">
            <div class="im1">
                <img src="/images/maintenance.png" alt="1" class="siz">

            </div>
            <div class="textt">
                <h6>Low maintenance</h6>
            </div>
        </div>
        <div class="col-md-2">
            
        </div>
 </div>
</section>

样式

代码语言：javascript
复制
.im1{
  padding-top: 8px;
  padding-left: 8px;
  
}

.siz{
  width: 40px;
}
.textt{
  font-size: 15px;
  color:#ffffff;
  font-family: 'Times New Roman', Times, serif !important;
  
 
}

这是图像

如何使用引导网格系统制作这个图像..。

html
css
twitter-bootstrap
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2018-03-14 09:02:57

我为你创造了一个密码。我希望它能对你有所帮助。https://codepen.io/myco27/pen/OvMdGp

​

代码语言：javascript
复制
img{
  width: 100%;
}
.img1{
  width: calc(100% / 8);
  float:left;
}

@media (max-width: 860px) {
  .img1{
  width: calc(100% / 4);
  float:left;
  }

}
代码语言：javascript
复制
<section class="container-fluid">
    <div class="row" style="background-color:#034ea2;">
        <div class="img1 text-center">
            <img src="https://webfoundation.org/docs/2017/03/March-12-Letter.jpg" alt="1">
        </div>
              <div class="img1 text-center">
            <img src="https://webfoundation.org/docs/2017/03/March-12-Letter.jpg" alt="1">
        </div>
              <div class="img1 text-center">
            <img src="https://webfoundation.org/docs/2017/03/March-12-Letter.jpg" alt="1">
        </div>
              <div class="img1 text-center">
            <img src="https://webfoundation.org/docs/2017/03/March-12-Letter.jpg" alt="1">
        </div>
              <div class="img1 text-center">
            <img src="https://webfoundation.org/docs/2017/03/March-12-Letter.jpg" alt="1">
        </div>
              <div class="img1 text-center">
            <img src="https://webfoundation.org/docs/2017/03/March-12-Letter.jpg" alt="1">
        </div>
              <div class="img1 text-center">
            <img src="https://webfoundation.org/docs/2017/03/March-12-Letter.jpg" alt="1">
        </div>
              <div class="img1 text-center">
            <img src="https://webfoundation.org/docs/2017/03/March-12-Letter.jpg" alt="1">
        </div>
    </div>
</section>

​

票数 0
EN

Stack Overflow用户

发布于 2018-03-14 09:11:40

第一个引导程序在定义或可以分解为2,3或4 segements...basically的12网格系统中运行--任何12的除数。

代码语言：javascript
复制
<div class="col-lg-1 col-md-3 text-center">
            <div class="im1">
                <img src="/images/hotel-elevator.png" alt="1" class="siz">

            </div>
            <div class="textt">
                <h6>Elegant Looks</h6>
            </div>
        </div>

然后，避免在主<div class="col-md-2"></div>包装器中拆分网格，只需将其保留为<div class="row justify-content-md-center"></div>。这个应该能正常工作。注意:在这个容器中，CSS中的图像数量仅为8张，只需修改以下内容

代码语言：javascript
复制
.siz{
  width: 100%;
}
票数 0
EN

Stack Overflow用户

发布于 2018-03-14 09:24:15

尝尝这个。它一排有8div。如图所示

代码语言：javascript
复制
<style>
.main{
background:#034da2;
}
</style>


    <div class="col-md-12 main">
    <div class="container">
        <div class="row">
                <div class="col-md-6">
                    <div class="row">
                        <div class="col-md-3">
                               <img src="image" alt="your image"/>   
                        </div>
                        <div class="col-md-3">
                              <img src="image" alt="your image"/>    
                        </div>
                        <div class="col-md-3">
                                   <img src="image" alt="your image"/>
                        </div>
                        <div class="col-md-3">
                                <img src="image" alt="your image"/>    
                        </div>
                    </div>
                </div> 
                <div class="col-md-6">
                    <div class="row">
                        <div class="col-md-3">
                                 <img src="image" alt="your image"/>     
                        </div>
                        <div class="col-md-3">
                                <img src="image" alt="your image"/>    
                        </div>
                        <div class="col-md-3">
                                 <img src="image" alt="your image"/>
                        </div>
                        <div class="col-md-3">
                                 <img src="image" alt="your image"/>
                        </div>
                    </div>
                </div>
            </div>
    </div>
    </div>
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/49273369

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档