当前位置：网站首页 > 技术文章 > 正文

适合新手的响应式网页布局，Bootstrap框架，两列和四列布局。

ccwgpt 2025-03-25 11:34 23 浏览 0 评论

适合新手的响应式布局：Bootstrap框架。

开始写两列和四列布局，这部分内容多但很简单。

·首先新添加一行，在里面添加一列用来放标题。接着是两列布局，还有四列布局，布局轻松搞定。

·开始往里面添加内容，这里是一个标题加一段文本，两列布局里是一张图片、一个小标题还有一段文本，后面的结构都是一样的，直接复制过去，看下效果。

·接下来依次给它们添加样式，让标题居中，给列添加这个类名，后面写stat是居左，send是居右，center是居中，顺便加个内边距，看下效果。

·开始处理两列布局部分，直接在图片上添加这个类名就适应负极的宽度了，看下效果。老问题出现了，有空隙，内边距的问题，直接把框架自带的内边距去掉，再来看下效果。

·为了美观给它们设置下边框，只添加这一个类名就可以了，看下效果。如果想用其他颜色可以再多加一个类名，框架预设了这几种颜色可供选择。

·现在继续将文本放到图片空白处，需要用到绝对定位，类名稍微有点多，把文本部分变成绝对定位，居于负极的最右侧，垂直方向居中，别忘了负极相对定位，看下效果。

·文本再微调下，让它们右对齐，顺便加个水平方向的内边距，看下效果。

·两列布局搞定。开始四列布局的样式，把列变成弹性盒子，弹性项目均匀分布，垂直方向居中对齐，顺便加个内边距，看下效果。

·最后复习下之前的旧知识，根据自己的需求调整下文本的大小和颜色，看最终效果，搞定。

·另外移动端还有点问题，需要调整下适配，移动端适配一般选择这个中缀，全部替换下即可，看下效果。

至此两列和四列布局完全搞定。

相关推荐