开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Bootstrap 4居中项目只在小的视口上，但没有对齐每一个其他大小？

Bootstrap 4 是一个流行的前端框架，用于快速开发响应式网页。如果你发现 Bootstrap 4 的项目在小的视口上居中，但在其他大小的视口上没有正确对齐，可能是由于以下几个原因：

基础概念

响应式设计：Bootstrap 使用一系列的断点（breakpoints）来定义不同屏幕尺寸下的布局。
网格系统：Bootstrap 的网格系统基于 12 列布局，通过 .col-* 类来定义列的宽度。

可能的原因

断点设置不当：可能没有正确设置断点，导致在某些视口大小下布局出现问题。
CSS 样式冲突：可能存在自定义的 CSS 样式与 Bootstrap 的样式冲突。
容器和行（row）的使用不当：没有正确使用 .container 或 .row 类来包裹内容。

解决方法

以下是一些可能的解决方案：

1. 检查断点设置

确保你使用的断点是正确的。Bootstrap 4 默认的断点如下：

xs (extra small): <576px
sm (small): ≥576px
md (medium): ≥768px
lg (large): ≥992px
xl (extra large): ≥1200px

你可以根据需要调整这些断点。

<div class="container">
  <div class="row justify-content-center">
    <div class="col-md-6">
      <!-- 内容 -->
    </div>
  </div>
</div>

2. 检查 CSS 样式冲突

确保没有自定义的 CSS 样式覆盖了 Bootstrap 的样式。你可以使用浏览器的开发者工具检查元素的样式。

3. 正确使用容器和行

确保正确使用 .container 和 .row 类来包裹内容。

<div class="container">
  <div class="row justify-content-center">
    <div class="col-md-6">
      <!-- 内容 -->
    </div>
  </div>
</div>

示例代码

以下是一个完整的示例，展示了如何在 Bootstrap 4 中实现响应式居中对齐：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 4 Centered Content</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <style>
    .centered-content {
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-md-6 centered-content">
        <h1>居中对齐的内容</h1>
        <p>这是一个示例文本。</p>
      </div>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

参考链接

通过以上方法，你应该能够解决 Bootstrap 4 中项目在不同视口大小下对齐问题。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

BootStrap框架总结

BootStrap框架总结: 概述: Bootstrap是最受欢迎的HTML,CSS和JS框架,用于开发响应式布局,移动设备优先的WEB项目. 作用: 开发响应式的页面....入门: 下载BootStrap www.bootcss.com官网地址模板: 1.导入BootStrap的css. 2.导入jquery的js(1.8+) 3.导入BootStrap的js 4.设置视口...格栅系统: "在不同分辨率的屏幕下展示不同的效果,根据不同的上网设备,栅格系统将屏幕分层一系列的行(row)和列(column),由行和列来创建页面布局,注意栅格系统必须放在布局容器内使用" 行:..."通过class = "row" 来设置一个行" 列(最多将视口分为12列) "通过class属性来设置在不同屏幕时所占的列 n表示每格占的份数" col-lg-n 大屏 col-md-n...标题: h1 -- h6 对其方式:(文本) text-left 左对齐 text-center 居中 text-right 右对齐列表: list0unstyled :

3.3K2 0

第122天：移动端开发常见事件和流式布局

--视口标签通可以使用 meta:vp + tab 来快速生成，通常我们可以设置为下边这样。...2、Bootstrap常用样式 container类：用于定义一个固定宽度且居中的版心。...-- 4 此处的代码会显示在一个固定宽度且居中的容器中 5 该容器的宽度会跟随屏幕的变化而变化 6 --> 7 8 栅格系统：Bootstrap...text-center 文本居中 text-left 文本左对齐 text-right 文本右对齐 pull-xx类：设置浮动。...-- 每一个.item就是单个轮播项目，注意默认要给第一个轮播项目加上active，表示为焦点 --> 25 26 <!

3.6K4 0

10分钟内就可以学会的几个CSS高招

所以，我完全理解为什么你会讨厌 CSS，但今天，我于分享的是一个小课程，你将学习如何使用现代功能编写干净的 CSS，同时避免在 2021 年以及未来不应该编写糟糕的代码。...在具有挑战性的 CSS 方面，例如如何在水平和垂直方向上居中 div 的古老问题。 ?...4、Grid 很棒 Grid与只处理单独的列和行的 flexbox 不同，如果你是一个工作较长的 web 开发者的话，你可能会觉得Grid有点眼熟，因为它与表格布局非常相似。...5、 Clamp it down 现在，当我们谈论响应式布局时，有 90% 的时间我们谈论的是根据设备或视口上的可用空间来更改某些内容的宽度。有很多方法可以做到。...例如，你可能有一篇文章的首选宽度为 50%，但在小屏幕上，你希望将其固定为 200 像素或在大屏幕上固定为 800 像素，你可以通过编写将有条件地应用 CSS 的媒体查询来实现基于视口大小，唯一的问题是媒体查询会让你想要随着项目的增长而离开自己

1.4K2 0

弹性（Flex）布局的使用

弹性布局最大的优点就是弹性，虽然使用百分比或者媒体查询也可以实现响应布局，但我认为以下几种情况下，flex布局是比较好的选择：视口中的特定块按照比例进行缩放一些以基准线对齐的布局模块垂直居中，水平居中...默认的是flex-start（左对齐），可以设置成flex-end（右对齐）和center（居中），也可以设置成space-between（两端对齐，且让剩余空间均匀的分布在每两个元素之间）或是flex-around...默认是stretch，即元素在竖直方向上充满整个空间，可以设置成flex-start（起点对齐）、flex-end（终点对齐）和center（居中），除此之外，可以使用baseline对齐，即元素内部第一行文字的基线对齐...flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。...解决方法：列表外部使用div或其他盒子包裹，使用flex布局，每个子元素设置最小宽度或实际宽度，或者设width: 0。 ? 使用注意弹性布局下每一个item默认是没有间隔的。

2.1K1 0

Bootstrap实用手册

具体数值 ②. initial-scale 视口的初始缩放倍率 A. 缩放倍数 B. 原始大小 ③. user-scalable 是否允许视口手动缩放 A. 1 /yes B. 0 / no 3....文字使用相对尺寸(em,rem)，尽量不用绝对尺寸(px) CSS 中的 1px 并不代表真实物理设备的 1px，如：iPhone4 以后，屏幕为 Retina 屏幕，屏幕大小没有变化，但分辨率提升一倍...列根据适用屏幕分成四种类型 A. .col-xs-* a. .col-xs-1 : 在超小屏幕中，占一列的宽(8.33%) b. .col-xs-2 : 在超小屏幕中，占两列的宽(16.66%) c....列偏移数量，每个列都可以指定向右偏移几列位置（不能用float）,偏移的列会影响后续的列,主要作用是列左右留白，列右对齐，列居中 A. .col-xs-offset-n :在 xs 下，当前列向右偏移...Bootstrap 组件－页头.page-header，允许为标题元素增加适当的空间，与其他元素有一定的间隔 29. Bootstrap 组件－水井.well 30.

6K2 0

经典黑色--网站管理界面

页面整体采用扁平化处理，布局更趋向于暴露内容的本质，页面块之间的留白更多，字体更大，配色更单一，在form表单处参照了bootstrap的流行风格，也加入了一些css3的动画效果，当然只有高级浏览器才支持...按钮是参照bootstrap的兼容写法，没有采用图片。这款主要是追求的页面的速度与原始技术的表达。同时其它方面也加入了我这几年对页面设计及前端的一些理解与感悟。 ...主界面顶部还是采用经典的黑配蓝的搭配，也没采用固定定位，固定定位的缺点就是在小屏上反而减少了视口大小。 2). 左侧菜单是固定宽度的布局，右侧主区域则是自适应。 3)....还好，在经历痛苦挣扎过程之后，在某一早晨，大脑清醒的情况下，果断定了现在这套。 4)....th,td选择了左对齐的方式，这样页面看起来有一种数据的规律感，如果是居中对齐，感觉视角上很零散，阅读反而增加了障碍。 4. 新增与修改页面 ? 1).

2.3K1 0

Web-第五天 BootStrap学习

Bootstrap在jQuery的基础工作，可以理解Bootstrap就是jQuery的一个插件。 Bootstrap 使得 Web 开发更加快捷，代码优雅，美观大方。...视口的作用：在移动浏览器中，当页面宽度超出设备(device)，浏览器内部虚拟的一个页面容器，将页面容器缩放到设备这么大，然后展示取值： width=device-width, 视口的宽度，大多手机浏览器视口的宽度是...行使用的样式“.row”，列使用样式“col-*-*” 内容应当放置于“列（column）”内列大于12时，将另起一行排列栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类...-- 1.整个topbar划分比例：1:2:1 2.中间区域只在“大屏幕”和“中等屏幕”显示 3.整个区域在“超小屏幕”英寸 --> <div class="container topbar hidden-xs...“列表”，内容<em>的</em><em>居中</em>将提供两种方案：文字<em>居中</em>，栅格列偏移 ?

5.1K5 0

BootStrap应用开发学习入门

="text-left">向左对齐文本居中对齐文本向右对齐文本 <p class="...列表<em>在</em>BS中支持有序列表、无序列表和定义列表。有序列表：有序列表是指以数字或<em>其他</em>有序字符开头<em>的</em>列表。无序列表：无序列表是指<em>没有</em>特定顺序<em>的</em>列表，是以传统风格<em>的</em>着重号开头<em>的</em>列表。...2 Item 2 水平<em>的</em>定义列表 dl 标签定义了定义列表（definition list） dt （定义列表中<em>的</em><em>项目</em>） dd （描述列表中<em>的</em><em>项目</em>...; 官方文档描述: <em>Bootstrap</em> 包含了一个响应式<em>的</em>、移动设备优先<em>的</em>、不固定<em>的</em>网格系统，可以随着设备或<em>视</em>口<em>大小</em><em>的</em>增加而适当地扩展到 12 列。.../* 超<em>小</em>设备（手机，小于 768px） */ /* <em>Bootstrap</em> 中默认情况下<em>没有</em>媒体查询,但是可以自己添加 */ @media (max-width: @screen-xs-max) {

17.5K2 0

BootStrap应用开发学习入门

="text-left">向左对齐文本居中对齐文本向右对齐文本 <p class="...列表<em>在</em>BS中支持有序列表、无序列表和定义列表。有序列表：有序列表是指以数字或<em>其他</em>有序字符开头<em>的</em>列表。无序列表：无序列表是指<em>没有</em>特定顺序<em>的</em>列表，是以传统风格<em>的</em>着重号开头<em>的</em>列表。...2 Item 2 水平<em>的</em>定义列表 dl 标签定义了定义列表（definition list） dt （定义列表中<em>的</em><em>项目</em>） dd （描述列表中<em>的</em><em>项目</em>...; 官方文档描述: <em>Bootstrap</em> 包含了一个响应式<em>的</em>、移动设备优先<em>的</em>、不固定<em>的</em>网格系统，可以随着设备或<em>视</em>口<em>大小</em><em>的</em>增加而适当地扩展到 12 列。.../* 超<em>小</em>设备（手机，小于 768px） */ /* <em>Bootstrap</em> 中默认情况下<em>没有</em>媒体查询,但是可以自己添加 */ @media (max-width: @screen-xs-max) {

14.6K3 0

移动端页面布局开发

justify-content设置主轴上子元素排列方式属性值说明 flex-start （默认值）从头部开始排列（如果主轴是x轴，就从左到右排列） flex-end 从尾部开始排列 center 在主轴居中对齐...2.align-self属性控制子项自己在侧轴上的排列方式允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。...rem适配布局 ####一.rem基础 em是相对于父元素的字体大小来说的 rem是相对于html 的字体大小来说的 rem的优点是可以通过修改html的字体大小来改变页面中元素的大小 ####二.媒体查询...font-size的大小页面元素的rem值= 页面元素值(px)/ html font-size的大小响应式布局(Bootstrap框架）一.响应式布局容器响应式需要一个父级作为布局容器，来配合子元素实现变化效果...在不同屏幕下，通过媒体查询来改变布局容器的大小，再改变子元素的布局方式和大小。

9972 0

CSS3 的视口单位vw、vh实现自适应（带有px，em，rem的简单介绍）

兼容性也是不错的，IE8以上版本和其他浏览器都已经支持，是个做响应式页面的好选择 4、重点：vw和vh vw和vh是视口（viewport units）单位，何谓视口，就是根据你浏览器窗口的大小的单位...二、使用vw，vh能做什么 1、响应式页面轻松搞定由于vw，vh的特性，他们能够根据窗口大小来自动调节字体大小，这就能很轻松地完成响应式页面的布局 2、小技巧之响应垂直居中可以使用vw，vh来实现在页面中响应垂直居中...3、模仿bootstrap的栅栏布局了解过bootstrap的都知道它的栅栏布局，而使用vw，vh就能够轻松实现。...总结：个人认为视口单位是个用来做响应式布局很不错的单位，当然如果要使用vw，vh，我的建议是rem结合vw来开发，因为视口单位有个缺点就是它没有最小或者最大限制，这就达不到我们都时候所希望的一个限制...所以我们可以在根元素上设置vw和vh，然后在根元素上限制最大最小值，然后配合body设置最大最小宽度。

2K1 0

【小程序_02】布局方式

2.2 justify-content(设置主轴上的子元素排列方式) 属性说明 flex-start 默认值从头部开始如果主轴是x轴，则从左到右 flex-end 从尾部开始排列 center 在主轴居中对齐...3.2 align-self(控制子项自己在侧轴上的排列方式) align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。...，媒体查询我们要按照从小到大或者从大到小的顺序来写 3. less 3.1 less 介绍 css 的弊端 CSS 需要书写大量看似没有逻辑的代码，CSS 冗余度是比较高的。...CSS 没有很好的计算能力非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码项目。...做为 CSS的一种形式的扩展，它并没有减少CSS的功能，而是在现有的CSS语法上，为CSS加入程序式语言的特性。

1.3K2 0

使用这种技巧，可以大大地提高前端布局效率

作者：Ahmad shaded 译者：前端小智来源：sitepoint 点赞再看，微信搜索【大迁世界】关注这个没有大厂背景，但有着一股向上积极心态人。...对于小屏幕，这似乎可以。但是，对于大屏幕，这是非常烦人的。对设计元素进行分组可以更好地增加间距。在没有wrapper的情况下，将设计元素划分为列是不容易完成的。...要考虑的重要事项是在左侧和右侧添加padding。当视口大小小于 wrapper 的最大宽度时，这将导致 wrapper 边缘粘在视口上。...，即使视口的大小小于最大宽度。...在每个项目中，我都准备了一组用于margin和padding的实用工具类，在必要时使用它们，考虑下图。 ?

3.9K2 0

BootStrap初始

在浏览器的左右俩边都会留有一定的间距效果如下： .container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。...栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。...因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。...（手机，小于 768px） */ /* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？）...--文本对齐--> 文本左对齐文本居中文本右对齐<

4.6K1 0

HTML & CSS页面布局之定位

b) relative 相对定位，元素保留在标准流中所占用的位置，但实际是边框及以内的部分将显示在偏移之后的位置。即虽然元素已经不再原来的位置了，但之前所占用的空间并不会被释放给其他标准流中的元素。...，但brother1盖住了brother2，brother3单独在第二行显示*/ 浮动元素还有一个特点：浮动元素不会挡住没有浮动元素中的文字, 没有浮动的文字会自动给浮动的元素让位置。...，居中对齐；space-between，两端对齐；space-around，项目间隔相等*/ align-items:stretch; /*该属性定义项目在交叉轴上的对齐方式。...stretch，默认值，如果项目没有具体高度，将占满整个容器；center，项目中线对齐；flex-start，开始对齐；flex-end，结束对齐；baseline，各项目的第一行文字基线对齐*/ }...两个特殊值：auto（默认的）表示占用盒子本来的大小；0则表示只占项目内容区域的大小（）*/ } 缩放和尺寸可以使用缩写形式。

5.5K1 0

一次解决你的图像尺寸和定位问题。

对于刚入门的不久的前端小伙伴可能给他一个礼拜也解决不了，因为要兼容所有的端，这时候他要怎么办呢？这里有一种方案，可以解决所有屏幕大小、所有卡片大小或任何其他用例上的问题，我们来看看这个万能的方法。...将图像导入到我们的组件中，然后将其放在页面上，下面是正常默认的情况： ? 在不同的视口上，图片随着屏幕的变化而变化。在不同的消费设备上有超过10,000种不同的屏幕尺寸。有小到360px宽的手机。...有5k台imac，也有 4k电视，这么多尺寸，我们要怎么去适配图片呢？把外围容器的大小写死怎么样？...这会比刚开始的好的多了，图像不再随视口的大小进行缩放，视口变大的时候，图片也只显示外围容器设置的大小。但是，如果视口太小，则会切除图像的底部。...CSS 更多的内置特性在CSS中，还有一些 background-image 相关的选项： ? background-position: center 告诉浏览器将图像居中放置在div上。

9733 0

CSS中各种布局的背后(*FC)

影响布局的因素： 1.盒的尺寸和类型 2.定位方案 Positioning Scheme （常规流，浮动和绝对定位） 3.文档树中元素之间的关系 4.外部信息（如：视口大小，图片的固有尺寸等） FC -...块容器盒要么只包含行内级盒，要么只包含块级盒，但通常文档会同时包含两者，在这种情况下，将创建匿名块盒来包含毗邻的行内级盒。...在垂直方向上，这些框可能会以不同形式来对齐（vertical-align）：它们可能会使用底部或顶部对齐，也可能通过其内部的文本基线（baseline）对齐。...垂直居中：创建一个IFC，用其中一个元素撑开父元素的高度，然后设置其 vertical-align:middle，其他行内元素则可以在此父元素下垂直居中。...布局规则设置为 flex 的容器被渲染为一个块级元素设置为 inline-flex 的容器则渲染为一个行内元素弹性容器中的每一个子元素都是一个弹性项目。弹性项目可以是任意数量的。

2.2K5 0

Web前端学习笔记之BootStrap

它支持响应式布局，并且在V3版本之后坚持移动设备优先。为什么要使用Bootstrap？...在Bootstrap出现之前：命名：重复、复杂、无意义（想个名字费劲）样式：重复、冗余、不规范、不和谐页面：错乱、不规范、不和谐在使用Bootstrap之后：各种命名都统一并且规范化。...--文本对齐--> 文本左对齐文本居中文本右对齐<...窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分...JavaScript插件常用的Bootstrap自带插件其他常用插件 Bootstrap实例精选：封面图 Carousel 博客页面控制台登录页 Offcanvas

2.8K2 0

简单的聊一聊如何用CSS制作一个专业的头部页眉（Headers）

因此，这是一个非常简单的标记。通常情况下，导航应该在第一个和最后一个项之间居中对齐。根据我的观察，这个问题已经成为前端社区中的新问题，类似于“居中一个div”的问题。...我们的中间元素在左侧和右侧元素之间居中对齐，但在页面的上下文中，中间元素并没有真正居中。这是创建页眉时的第一个挑战：正确设置基本布局。在您确定要实现的布局以及如何实现之前，不要试图添加更多内容。...它们中的大多数使用了我展示的将justify-content属性设置为space-between的技巧（因此，它们的导航并没有真正居中）。...这就是整个"hack"的全部内容。因为我们将它们的基准大小设置为0，它们将等比增长，从而使我们的中间元素居中对齐。当创建页眉布局时，当然，将页眉的中间元素居中对齐并不是我们面临的唯一挑战。...没什么了不起的。但容器查询的优势在于我们可以为容器指定最小宽度。我们不关心视口有多大，但我们知道：如果我们的容器宽度小于400像素，它会变得非常难看。这是我真正期待被广泛支持的功能之一。

4071 0

Bootstrap框架

它支持响应式布局，并且在V3版本之后坚持移动设备优先。为什么要使用Bootstrap？...在Bootstrap出现之前：命名：重复、复杂、无意义（想个名字费劲）样式：重复、冗余、不规范、不和谐页面：错乱、不规范、不和谐在使用Bootstrap之后：各种命名都统一并且规范化。...--文本对齐--> 文本左对齐文本居中文本右对齐 JavaScript插件模态框注意：需要将模态框的HTML代码放在文档的最高层级内（也就是说，尽量作为 body 标签的直接子元素），以避免其他组件影响模态框的展现和/或功能。...通过 .fade类来控制模态框弹出时的动画效果（淡入淡出效果）。通过在 .modal-bodydiv中设置 .row可以使用Bootstrap的栅格系统。

3.9K7 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭