javascript - bootstrap栅格化是我这么用吗，我用了很多，但是我看别人都没有用这么多啊-PHP中文网问答

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

最近更新

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

javascript - bootstrap栅格化是我这么用吗，我用了很多，但是我看别人都没有用这么多啊

阿神 2017-04-10 15:32:20

[JavaScript讨论组]

453

我要实现下图这种效果，帮我看一下是我这么写吗，我怎么觉得我用了这么多的row和col啊···


        
            
                
                    

                        SECRET系列的产品
                    
                    
                    
                        已付款
                    
                
                
                    

                        
                    
                    
                        

                            

                                SECRET系列No.1的商品名
                            
                        
                        
                            

                                王波
                            
                        
                        
                            

                                塑料，90X120cm
                            
                        
                    
                    
                        

                            已签收
                        
                        
                            X1
                        
                    
                
                
                    

                        
                    
                    
                        

                            

                                SECRET系列No.1的项目名
                            
                        
                        
                            

                                王波
                            
                        
                        
                            

                                2014年，油画，90X120cm
                            
                        
                    
                    
                        

                            未分配
                        
                        
                            X2
                        
                    
                
                
                    

                        合计：￥150.00
                    
                    
                        查看收益
                        查看详情
                    
                
            
            
                
                    

                        SECRET系列的产品
                    
                    
                    
                        已付款
                    
                
                
                    

                        
                    
                    
                        

                            

                                SECRET系列No.1的商品名
                            
                        
                        
                            

                                王波
                            
                        
                        
                            

                                塑料，90X120cm
                            
                        
                    
                    
                        

                            
                        
                        
                            X1
                        
                    
                
                
                    

                        合计：￥150.00
                    
                    
                        支付

阿神

闭关修行中......

全部回复(7)

PHP中文网2017-04-10 15:34:20 7楼

看了一下，我觉得有这些需要注意的地方：

Bootstrap的栅格嵌套。正确的做法是，最外层有一个.container或.container-fluid，然后子元素接.row，再下面是.col。如果在内部还有更多的栅格细分，继续在.col内接.row，再接.col（.container不再使用）。所以，题主的.row和.col的嵌套是正确的，但最外层少了.container或.container-fluid。至于用了很多的.col和.row，嵌套的时候就会有很多，没问题的。

推荐阅读这篇 Bootstrap 栅格系统的精妙之处。
xs、md这些表示column的类型的词的意义。 Bootstrap的栅格系统的设计中，有一个断点区分的设计，断点从小到大依次是 xs、 sm、 md、 lg。低于这个断点，布局块都会竖直堆叠起来，高于或等于这个断点，则定义了float，会水平排列。其中xs表示极小，也就是始终都认为大于断点，始终水平浮动排列。

代码中的这一部分栅格可能不必要。

<p class="row">
    <p class="col-xs-12">
        SECRET系列No.1的商品名
    </p>
</p>
<p class="row">
    <p class="col-xs-12">
        王波
    </p>
</p>
<p class="row">
    <p class="col-xs-12">
        塑料，90X120cm
    </p>
</p>

既然这里的设计就是3行，那么直接用3个<p>或<p>这样的块元素就可以了。它们就符合这样的每一个占一行的结构。