程序员经验分享-hwhale

Bootstrap - 5 列布局

2023-12-01

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

这是我使用的代码

  <!-- 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 enter image description here

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


5 列与 Bootstrap 4

这是 5 个相等的全宽列 (没有额外的 CSS 或 SASS） 使用自动布局网格..

<div class="container-fluid">
    <div class="row">
        <div class="col">1</div>
        <div class="col">2</div>
        <div class="col">3</div>
        <div class="col">4</div>
        <div class="col">5</div>
    </div>
</div>

http://codeply.com/go/MJTglTsq9h

该解决方案之所以有效，是因为 Bootstrap 4 现在是 Flexbox。您可以将 5 列包裹在同一个列中.row使用clearfix中断，例如<div class="col-12"></div> or <div class="w-100"></div>每 5 列。

2020年更新

从 Bootstrap 4.4 开始，您还可以使用row-cols-5类于row...

<div class="container">
    <div class="row row-cols-5">
        <div class="col">
            X
        </div>
        <div class="col">
            X
        </div>
        <div class="col">
            X
        </div>
        <div class="col">
            X
        </div>
        <div class="col">
            X
        </div>
        <div class="col">
            X
        </div>
    </div>
</div>

https://codeply.com/p/psJLGuBuc3

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html

css

twitterbootstrap

Bootstrap - 5 列布局 的相关文章

  • Twitter Bootstrap Modal 无法在 Rails 中工作

    我还很新Rails and to twitter bootstrap 我正在研究模态 但我收到了 NoMethodError 未定义的方法 渲染 当我删除 代码来自my release js erb页面 它消失但没有窗口出现 另外 还有错误

  • php 在内容前插入十六进制字符数

    我正在将网站移动到新服务器 旧服务器有 php 5 3 2 新服务器有 php 5 5 9 Centos httpd Apache 2 2 26 我已经复制了文件 它工作正常 除了唯一奇怪的事情 一些奇怪的十六进制数字被插入到页面内容之前

  • 标题的固定高度和更改宽度（HTML 表格）

    我需要确保表格标题的高度是固定的 并且宽度是根据标题单元格内容进行调整的 标题文本最多显示两行 我们如何使用样式来做到这一点 另外 我想确保表行的宽度与标题行的宽度相同 即标题行决定宽度 注 目前 交易部门负责人别名 是按行排列的 它需要分

  • 文本区域下的额外填充

    我的文本区域下面有额外的填充 但我似乎找不到它的来源 我已将单独的代码放在此页面上 http jsfiddle net wfuks http jsfiddle net wfuks 我似乎找不到它的来源 它有类 field field bac

  • 文本区域值高度[重复]

    这个问题在这里已经有答案了 我有一个 textarea 其 css 高度设置为 85px 用户可能会在该文本区域内键入内容行 我想知道文本 值的高度 而不是文本区域本身 有没有办法检查内部文本的高度 包括换行符 我会将文本区域的内容复制到另

  • IE8/9 - CSS 文件的最大字节数

    我目前正在开发的应用程序有过多的 CSS 样式 我们似乎已经达到了 IE8 9 以及它可以加载的 CSS 数量的某种限制 在某些时候 它会停止解释 CSS 从而破坏某些页面上的样式 我们正在使用 Combres 来压缩 缩小导致 CSS 文

  • Chrome 扩展程序未加载 EventListener

    我一直在创建一个 chrome 扩展 它将我的新标签页分成 2 个框架 这样我就可以尝试加载 2 个不同的 URL 现在我开始很简单 但我无法让它们按预期加载 这是代码 背景 html

  • 将 html 源拆分为多个文件

    HTML 是否支持将源代码拆分为多个文件 我正在寻找 C 的等价物 include 或者也许是类似 C 的东西partial 可以采用源路径并在该位置注入文件内容的元素 如果之前有人问过这个问题 我们深表歉意 Google 和 SO 搜索没

  • 使用 XPath 获取内部有链接的段落文本

    我正在使用 XPath 解析 HTML 页面 并希望获取某些特定段落的完整文本 包括链接文本 例如我有以下段落 p class main content This is sample paragraph with a href http g

  • 复制 Chrome 默认输入的轮廓样式

    如何设置默认 Chrome 输入的轮廓样式 焦点上为橙色 使其在每个浏览器中看起来都相同 Chrome 风格似乎是textarea focus outline rgb 229 151 0 auto 5px outline offset 2p

  • 如何解决flash的zindex问题

    在网页中我需要显示div覆盖未使用的 Flash 横幅wmode transparent环境 怎么解决呢 根据我的记忆 你可以将 div 推入 也许使用Javascript 这样你就不会弄乱你的HTML iframe 是像 flash 一样

  • 如何使用 jQuery 将各种元素包装在 div 标签中？

    我有一个 html 结构 如下所示 h5 Title h5 p Content p ul li Item li li Item li ul p Content p h5 Title h5 p Content p ul li Item li

  • 从提交的表单中转义字符串中的字符

    每次发布帖子时 我都会得到转义字符 gt gt gt 我有一个多步骤表单 它将数据从一种表单传输到另一种表单 我将这些值与准备好的语句一起保存在数据库中 数据库中的值当前看起来像Paul s House 用户应该可以在字符串中使用单引号和双

  • Django 未在 404 页面上应用应用程序中的 CSS 文件

    姜戈3 0 8 Python 3 7 x 我有一个包含一些应用程序的 Django 项目 我正在尝试为 400 403 404 500 错误制作一些 默认 错误页面 我已经这样做了 并显示了适当的模板 但没有任何样式或 JS 在 404 错

  • 自动溢出的容器中不会出现滚动条（IE10、Windows Phone 8）

    我有一个容器 比方说div with overflow auto 其中的元素完全按照预期滚动 但不会出现典型的触摸滚动条 我尝试设置 ms overflow style auto明确地 但没有任何改变 浏览器 IE10 设备 Windows

  • 透明、无边框文本输入

    如何删除周围的边框

  • 创建响应式眼睛焦点图标

    我一直在尝试制作响应式彩色眼睛焦点图标 但到目前为止我所尝试的一切均不成功 我试图在某种程度上复制真眼的颜色 我使用边框 框阴影来获取颜色 但该部分没有缩放 也尝试过轮廓 但也失败了 那个甚至不是圆的 div 的高度当前是静态的 但我希望它

  • Chrome 上的 contenteditable 中未显示编辑光标

    当您打开此页面时 请参阅现场演示 http jsfiddle net gs3p1a6r 3 show 与 Chrome span span CSS myspan border 0 outline 0 JS myspan focus the

  • CSS交付优化：如何推迟CSS加载？

    我在尝试着优化 CSS 交付遵循针对开发人员的谷歌文档https developers google com speed docs insights OptimizeCSSDelivery example https developers

  • HTML标题属性样式[重复]

    这个问题在这里已经有答案了 如何在不使用 javascript 或 CSS 的情况下更改以下标记中标题属性的样式 因为我将 HTML 插入到原本无法编辑的文档中的特定位置 span title This is information Thi

随机推荐

  • 从外部 JavaScript 函数调用 React 组件的函数

    我正在尝试从 JavaScript 函数调用 React 组件的函数 在初始阶段 我想调用在 React 组件中声明的函数 但我需要从 JavaScript 函数调用它 而不是从 React 调用它 我知道如何从 React 函数调用 Ja

  • 无法安装 IE 7 或 8 的 gwt 开发者插件

    我想为 IE 安装 gwt 开发者插件 我已经在 chrome 和 firefox 上安装了它 没有任何问题 当我想为 IE7 安装它时 在带有 sp2 的 vista 和带有 sp2 的 windows server 2008 上 它说插

  • 如何用不同的类名包裹DIV标签？ [复制]

    这个问题在这里已经有答案了 复制 如何将父元素添加到一组段落中 我在文档中重复了以下 HTML 块 div class first My first div div div class second My second div div di

  • 在 ARMv6 上失败之前的检查点之后重新启动 mpi 从站

    UPDATE 我有一个大学项目 我应该在其中使用 RP 建立一个集群 现在我们有了一个功能齐全的系统 并且启用了 BLCR MPICH BLCR 与与该库链接的正常进程配合得很好 我们必须通过管理 Web 界面展示的演示包括 并行执行作业

  • Tomcat Windows 服务器中启用 SSL

    我想在 Windows Server 2008 和 tomcat 7 上的网站上启用 https 我从证书网站获得以下文件 ca crt pem csr pkcs 我知道我必须在 tomcat 的 server xml 中添加以下内容

  • 实体框架如何与递归层次结构一起工作？ Include() 似乎不适用于它

    我有一个Item Item has a Category Category has ID Name Parent and Children Parent and Children are of Category too 当我对特定的实体执行

  • 在嵌入式 Linux 平台上使用 std::string 时出现段错误

    我已经花了几天时间来解决我的应用程序在嵌入式 Arm Linux 平台上运行的问题 不幸的是 该平台阻止我使用任何常用的有用工具来查找确切的问题 当相同的代码在运行 Linux 的 PC 上运行时 我没有收到这样的错误 在下面的示例中 我可

  • 网络调用后绑定到 UIRefreshControl

    我是 RxSwift 的新手 我想知道如何能够 反应性 地将 UIRefreshControl 与 UITableView 一起使用 而不是创建目标并手动调用的正常方式beginRefreshing and endRefreshing 例如

  • 如何自定义人性化Moment js日期结果

    我想用 moment js 自定义人性化的日期结果 假设我有一个约会 我想利用剩余时间 3 个月内 返回结果 moment 20141001 YYYYMMDD fromNow in 3 months 我如何自定义结果字符串 例如3 mont

  • 如何访问 Angular 2 组件和服务中的常量？

    我有一个常量文件常量 ts export const C0NST constant 我在服务中访问它一些服务 ts像这样 import C0NST from constants console log C0NST constant 但是 当

  • 我如何改进我的 opencv 程序以仅检测人行横道？

    我想检测下图中的人行横道 并用红色填充它 但程序也会检测其他东西 这是我的代码 import cv2 import numpy as np img cv2 imread zebra lane jpg cv2 imshow kep img i

  • 为什么 iOS 9 中纬度和经度显示为零？

    我必须找到当前位置并且我正在使用此代码 CLLocationCoordinate2D getLocation locationManager CLLocationManager alloc init locationManager dele

  • 一个单元格中多个条件的 Excel 匹配索引

    我有一个电子表格 它是根据 Microsoft Sharepoint 中的数据自动填充的 不幸的是 这些数据填充了我的位置列 如下所示 IND ENG USA 例如 如果该特定输入有 3 个位置 然后 我使用下拉框 通过数据验证制作 来过滤

  • 如何修复此正则表达式以便它正确替换 * （在单词之间）？

    我正在练习正则表达式 我想创建正则表达式 into em 就像使用 Markdown 一样 el el replace b g em el el replace b s g 1 em 这在大多数情况下都有效 但是 如果您将正则表达式应用于此

  • 如何将变量的值放入字符串中（将其插入字符串中）？

    我想放一个int into a string 这就是我现在正在做的事情 num 40 plot savefig hanning40 pdf problem line 我必须为几个不同的数字运行该程序 所以我想做一个循环 但是像这样插入变量不

  • For 循环除数

    对于 C 我是一个业余爱好者 但我已经收到了一项超出我知识范围的任务 任务是输入数字 n m 程序必须将其视为一个区间 在区间中检查是否存在相同指数的数字之和 编辑 15 10 18 事实证明我没有正确理解我的任务 这里是 用户输入两个数字

  • 使用 SQL JOIN 和 COUNT

    假设有两张表 一张保存用户信息 一张保存某种类型的用户记录 例如收据 用户和收据之间存在一对多的关系 检索用户 按最大收据数量排序 的最佳 SQL 方法是什么 我能想到的最好方法是使用 join 和 count 返回用户数组及其相关收据数量

  • on:click 在 Svelte 中更新 DOM 时不起作用

    The send random 当我将其添加为新添加的 DOM 中的指令时 它不起作用 for let i 0 i lt items length i data div class block received span class ite

  • Selenium WebDriver CSS 选择器帮助 - 用于选择日期

    我需要从小窗口中选择日期 下面是 html 代码示例 有人可以帮我通过 CSSSelector 或任何其他最适合执行此任务的方式选择日期吗 td class a class ui state default href 1 a td td c

  • Bootstrap - 5 列布局

    我正在尝试获得 5 列全宽布局 但找不到适合我需求的解决方案 这是我使用的代码 div class container div class row div class col lg 12 style border 1px solid red

热门标签