Bootstrap - 5 列布局 [英] Bootstrap - 5 column layout

查看：20
本文介绍了Bootstrap - 5 列布局的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试获得 5 列全宽布局，但找不到适合我需求的解决方案

这是我使用的代码

 <div class="容器"><div class="row"><div class="col-lg-12" style="border: 1px solid red"><div class="row"><div class="col-xs-12"><div class="col-xs-2 col-xs-offset-1" id="p1">一个</div><div class="col-xs-2" id="p2">两个</div><div class="col-xs-2" id="p3">三</div><div class="col-xs-2" id="p4">四</div><div class="col-xs-2" id="p5">五</div>

<!--//col-lg-12 -->

<!--//行-->知识

<!--//col-lg-12 -->

<!--//行-->

<!--//容器-->

结果我得到

这就是我想要实现的目标.全宽 5 列布局，每列之间有一个空格

解决方案

UPDATE, 2021:对于现代 Bootstrap (4+)，我推荐 Zim 的回答 因为它是使用 Bootstrap flex 类的自然方式

.col-xs-2{背景:#00f;颜色:#FFF；}.col-half-offset{左边距:4.166666667%}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="样式表"/><div class="容器"><div class="row" style="border: 1px 纯红色"><div class="col-xs-2" id="p1">一个</div><div class="col-xs-2 col-half-offset" id="p2">两个</div><div class="col-xs-2 col-half-offset" id="p3">三</div><div class="col-xs-2 col-half-offset" id="p4">四</div><div class="col-xs-2 col-half-offset" id="p5">五</div><div>lorem</div>

这应该没问题.

I'm trying to get 5 column full width layout but I can't find the solution that fits on my needs

Here's the code I use 

  <!-- Content Section -->
    <div class="container">
      <div class="row">
        <div class="col-lg-12" style="border: 1px solid red">
          <div class="row">
            <div class="col-xs-12">
              <div class="col-xs-2 col-xs-offset-1" id="p1">One</div>
              <div class="col-xs-2" id="p2">Two</div>
              <div class="col-xs-2" id="p3">Three</div>
              <div class="col-xs-2" id="p4">Four</div>
              <div class="col-xs-2" id="p5">Five</div>
            </div>
            <!-- //col-lg-12 -->
          </div>
          <!-- //row -->
          lorem
        </div>
      </div>
      <!-- //col-lg-12 -->
    </div>
    <!-- //row -->
  </div>
  <!-- //container -->

As a result I get

And here is what I'm trying to achieve. Full width 5 column layout with a space between each column

解决方案

UPDATE, 2021: for modern Bootstrap (4+), I recommend Zim's answer due to it's natural way of using Bootstrap flex classes

.col-xs-2{
    background:#00f;
    color:#FFF;
}
.col-half-offset{
    margin-left:4.166666667%
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row" style="border: 1px solid red">
        <div class="col-xs-2" id="p1">One</div>
        <div class="col-xs-2 col-half-offset" id="p2">Two</div>
        <div class="col-xs-2 col-half-offset" id="p3">Three</div>
        <div class="col-xs-2 col-half-offset" id="p4">Four</div>
        <div class="col-xs-2 col-half-offset" id="p5">Five</div>
        <div>lorem</div>
    </div>
</div>

This should be ok.

这篇关于Bootstrap - 5 列布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆