如何使用Bootstrap Responsive Utilities在不同屏幕大小中以不同方式定位div？
使用Bootstrap Responsive Utilities可以在不同屏幕大小中以不同方式定位div。Bootstrap提供了一系列的CSS类，可以根据屏幕大小来设置元素的定位和显示方式。
具体步骤如下：
- 首先，在HTML文件中引入Bootstrap的CSS文件和JavaScript文件。可以通过CDN链接或者本地文件引入。
- 在需要定位的div元素上添加Bootstrap的CSS类。常用的类有：
d-none：在所有屏幕大小下隐藏元素。d-sm-none：在小屏幕（<576px）下隐藏元素。d-md-none：在中等屏幕（≥576px）下隐藏元素。d-lg-none：在大屏幕（≥768px）下隐藏元素。d-xl-none：在超大屏幕（≥992px）下隐藏元素。d-xxl-none：在超超大屏幕（≥1200px）下隐藏元素。
除了d-none系列类，Bootstrap还提供了其他一些类来设置元素的显示方式和定位，例如：
d-block：在所有屏幕大小下以块级元素显示。d-inline：在所有屏幕大小下以内联元素显示。d-inline-block：在所有屏幕大小下以内联块元素显示。d-flex：在所有屏幕大小下以弹性盒子布局显示。d-grid：在所有屏幕大小下以网格布局显示。
- 根据需要，可以组合使用多个CSS类来实现更复杂的定位和显示效果。例如，可以使用
d-flex和justify-content-center类来在所有屏幕大小下水平居中显示元素。
示例代码如下：
<div class="d-none d-md-block">这个div在中等屏幕及以上大小显示</div>
<div class="d-block d-md-none">这个div在小屏幕下显示，中等屏幕及以上隐藏</div>
<div class="d-flex justify-content-center">这个div在所有屏幕大小下水平居中显示</div>以上是使用Bootstrap Responsive Utilities在不同屏幕大小中以不同方式定位div的方法。通过合理使用这些CSS类，可以轻松实现响应式布局和定位效果。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：https://cloud.tencent.com/
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
- 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云区块链服务（BCS）：https://cloud.tencent.com/product/bcs
- 腾讯云物联网平台（IoT Hub）：https://cloud.tencent.com/product/iothub
- 腾讯云移动开发平台（MPS）：https://cloud.tencent.com/product/mps
相关·内容
2回答
响应式视频默认大小
、、、、
我有一个使用bootstrap的网站，在我的页面核心有一张图片，下面是一段嵌入youtube的视频：
<div class="col-xs-12 col-sm-12">
<a href="tech.php">
<img class="img-responsive img-rounded" src="assets/tech_withText.jpg" alt="Generic placeholder image" width="1200
浏览 0提问于2016-11-26得票数 0
2回答
如何使div与背景图像一起响应bootstrap 3 ?？
在bootstrap 3中可以使用img响应类吗?？
我的div是空的，如下所示：
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="workflowstep workflowstep1 img-responsive">
</div>
<div
浏览 0提问于2013-11-03得票数 4
回答已采纳
1回答
我试着在bootstrap3上做对img有响应的文本。它不能正常工作，因为当我制作“绝对”css时，它将没有响应性。如何使按钮始终在图像上显示并具有响应性？
一些HTML
<div class="container">
<div class="row">
<div class=" col-md-12 col-sm-12 col-xs-12">
<div class=" col-md-6
浏览 2提问于2014-04-18得票数 1
1回答
自举3绝对行
、、
我是新来的靴带3。我试着做相对行和绝对行，但是当我创建它们时，我发现我必须添加每个屏幕类？为什么？不管怎么说，它能在md和sm屏幕上工作，但不适用于手机大小-xs-
HTML :
<div class="row">
<div class="col-md-4 RelativeRow " >
<img src="img/Plans/1.jpg" class="img-responsive" />
<div class="row"
浏览 2提问于2014-02-28得票数 0
1回答
我有图像，这是整个屏幕的宽度。我希望在使用bootstrap 4调整屏幕大小为bz后，图像保持在屏幕的中心。
<div class="crop text-center">
<img src="pictures/home.jpg" class="home img-responsive" alt="Wedding bouquet">
</div>
.crop {
width: 100vw;
height: 100vh;
overflow: hidden;
}
.h
浏览 5提问于2018-07-21得票数 1
回答已采纳
2回答
我读过下面的文章，它描述了一个很好的无启动项目结构，它允许在不编辑源代码的情况下定制引导程序。但我想是给Bootstrap 2的吧：
。
我非常喜欢这篇文章，它为更少的文件提供了如下的结构。
1)在引导文件的基础上创建自己的theme.less
2)在您的新鲜theme.less中包括以下内容：
// importing all bootstrap.less files, leve them untouched, so you can update bootstrap
@import “../bootstrap/less/bootstrap.less”;
// this is copy
浏览 5提问于2013-11-08得票数 4
回答已采纳
1回答
我正在为Tic Tac Toe游戏做布局，因此我希望当屏幕大小调整时，正方形块始终保持在相同的位置。
我使用的是Bootstrap 4和SCSS。
1)无论屏幕大小，如何将它们固定在同一位置？
2)如果屏幕变小了，如何根据屏幕大小调整游戏包装器div中所有项目的大小？
codepen链接：
HTML：
.block {
background-color: lightBlue;
width: 100px;
height: 100px;
border: 2px solid black;
position: relative;
&:hover {
back
浏览 0提问于2017-07-19得票数 0
我正在Twitter Bootstrap 3中构建一个快速的HTML原型，但遇到了一个响应图像高度的小问题。
我定义了三列，每列中有一个图像。我将图像设置为响应式，并修改了默认引导程序中每列之间的填充。我的问题是，中间列中的图像比其左侧和右侧列中的图像略大。这是我的问题的一个快速屏幕截图：
如何修复以使每列中的所有三个图像具有相同的高度？
HTML：
<div class="container">
<div class="row">
<div class="col-sm-4 item-left">
浏览 2提问于2013-11-21得票数 0
我有一个滑块，我选择了另一个帖子，其中有一个非常相似的问题。滑块的目的是让多个元素同时出现在屏幕上，而不是一个。然后，它们将一个一个地移出屏幕，被另一个取代。
示例
1-2-3-4-5-6 >>> 2-3-4-5-6-7 >>> 3-4-5-6-7
目前，滑块一次移动整行，而不只是向右/向左滑动一行。任何帮助都将不胜感激。
谢谢
html：
<!DOCTYPE html>
<html>
<head>
<title> Spotlight Productions </title>
浏览 1提问于2015-02-24得票数 1
回答已采纳
1回答
错列填充与引导SASS栅格
、、、、
我有一个最低限度的启动-SASS设置，表现不好。它基本上是一个三列模板，其中CSS元素是通过混合生成的。使用下面的代码，第三列，最右边的列在第一列下面，这是一种不想要的行为。下面是一个截图：
我认为这是一个空间不足的问题:如果我从每个列中删除15 it列填充(通过手动方式，通过Chrome工具)，它们就很适合容器内部。
这是main.sass
/* minimal Bootstrap-SASS */
@import "bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/variables"
浏览 2提问于2014-12-22得票数 1
回答已采纳
1回答
我是bootstrap的新手。我在使用bootstrap的响应图像时遇到了以下问题。我的图像似乎没有缩放。我不知道哪里出了问题。
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, maximum-scale=1">
<link rel="stylesheet" href="bootstrap.min.css" />
</h
浏览 0提问于2014-11-19得票数 0
1回答
移动应用程序中的图像渲染
、、、、
我目前正在开发一款android手机应用程序，我遇到了android手机的图像渲染问题，而android手机的体积更小。这些图像在Nexus这样的手机上看上去很整洁，三星的屏幕很宽，但屏幕较小的手机上的图像却重叠。我正在使用离子型来构建我的代码&还包括了引导程序。
我已经在样式部分中包含了以下代码：
@media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
正文中的代码如下：
<div class="co
浏览 0提问于2015-11-19得票数 0
回答已采纳
1回答
我正在为自己做一个网站，我有问题的引导网格，以使菜单响应移动屏幕。
全屏图像：
我设法编写了菜单的响应性设计。然而，当重新标度时，菜单项似乎出现了问题。他们只是不会在菜单下对齐。(很明显，我希望他们能在下面的图像上盘旋，而不是把它全部推下去)。
移动屏幕图像：
提前谢谢你的帮助。如果我违反了任何规则，请指出正确的方向。
向你问好，汤姆
/* Lay-out: Header*/
.header-row {
display: flex;
align-items: center;
}
.nav-no-mar-pad {
margin: 0;
padding: 0;
}
.nav
浏览 2提问于2016-10-06得票数 2
回答已采纳
2回答
如何在bootstrap 3中放大图像？ Bootstrap 3中的图像可以通过添加.img-responsive类使其响应友好。这将对图像应用max-width: 100%；和height: auto；，以便它很好地扩展到父元素。 使用以下代码可以很好地缩小图像，但无法在较大屏幕上获得父div的大小。 如何做到这一点呢？演示：http://www.bootply.com/8uXBxX8Qjy
浏览 50提问于2014-05-30得票数 2
我已经使用引导3创建一个固定的导航栏顶部的网页。在正文中，我有带有#锚标记的元素。当我从导航栏中单击时，元素位置会显示出来，但是行(大致是导航条的高度)-BS3.0docs表示您需要将主体的填充-顶部放置到导航条的高度(在本例中为50 put )，并具有相对的身体位置。有帖子说文档不正确，我似乎无法解决这个问题.
这里有一个小提琴：和全屏
点击“关于”，滚动应该停止在圣诞老人的头部顶部。在我的浏览器(Chrome)中，它远远超出了这一范围，掩盖了标题。任何见解都将不胜感激。
<!DOCTYPE html>
<html lang="en">
<hea
浏览 3提问于2014-10-31得票数 0
回答已采纳
1回答
我使用bootstrap和img-responsive类。我试着把一张图片放在div的中间，效果很好。但是，对于某些屏幕尺寸，我希望div/image设置为某个最小高度。但是，当我设置min-height时，图像会垂直拉伸以达到此高度，但宽度不会，因此图像会失真。
CSS
img#main-im14 {
min-height: 500px;
width: 100%;
}
HTML：
<div class="header-content-inner">
<img id="main-im14" src=
浏览 0提问于2016-12-08得票数 0
5回答
在B5新文档之后，您应该使用新的实用程序API添加新的实用程序。不过，我还没有得到新的产出。
实例：
@import "bootstrap/scss/utilities";
$utilities: map-merge(
$utilities,
(
"cursor": (
property: cursor,
class: cursor
responsive: true,
values: auto pointer grab,
)
)
);
我的文件：
@import "bootst
浏览 2提问于2020-12-20得票数 4
回答已采纳
5回答
我正在尝试使用Bootstrap调整图像大小。我有一个足够大的标志，为大屏幕和分辨率。显然，图像应该在所有分辨率(大小分辨率)下都能很好地调整大小。我使用了Bootstrap的.img响应类来响应图像。很明显，图像在大分辨率下显示良好，但在较小分辨率下图像应该变小。问题是- image在较小的分辨率下不会变小。任何帮助都将不胜感激。
<BODY>
<nav class="navbar navbar-default">
<div class="container-fluid">
&l
浏览 0提问于2014-07-11得票数 5
1回答
引导符号没有显示
、、、、
我用和组件构建了我的角度应用程序
Sass (节点)
我将主题更改为平面，从插入到的_bootstrap.scss下载它。
// Core variables and mixins
@import "bootstrap/variables";
@import "bootswatch/variables";
......
.....
// Utility classes
@import "bootstrap/utilities";
@import "bootstrap/responsive-utilities";
@i
浏览 6提问于2015-02-25得票数 1
3回答
我想为我朋友的婚礼建一个网站。我使用的是Bootstrap 5，嵌入的视频没有填满屏幕。这是一个live test page HTML： <div class="embed-responsive embed-responsive-16by9 mx-auto"><iframe width="560" height="315" src="https://www.youtube.com/embed/S8smZWM_dl8" title="YouTube video player" allow="
浏览 47提问于2021-11-04得票数 3
我刚接触bootstrap。我得到了这个代码
<div class="row-fluid inline">
<div class="img-responsive span2 p-10"><img src="http://imageshack.us/a/img823/3578/lnrk.jpg" alt="Responsive image"/></div>
<div class="img-responsive span2 p-10"><
浏览 0提问于2013-11-15得票数 0
2回答
我有一个响应表，可以使用overflow-x: auto在较小的屏幕上实现水平滚动( bootstrap中的table-responsive类负责这一点)。在每个表格行的末尾，我有一个主按钮，它打开一个带有其他按钮的下拉列表。预期的功能是，单击main按钮后，下拉菜单将打开，而不会更改任何其他内容。为此，我使用位置relative和absolute。
然而，在最后一行，当单击按钮时，由于overflow-x:auto属性，它启用了垂直滚动。如果删除overflow属性，则除了表格的水平滚动之外，其他所有内容都可以正常工作。这是一个显示问题的小提琴
function openDropdown
浏览 0提问于2019-05-23得票数 0
2回答
建议将.col-*作为.d-flex容器中的子容器使用(允许)吗?或者不是使用.d-flex的方式，而是使用.row。
在中，我找不到在.d-flex容器中使用.col-*的任何示例。他们只使用这样的布局
<div class="d-flex flex-row">
<div class="p-2">Flex item 1</div>
<div class="p-2">Flex item 2</div>
<div class="p-2">Flex
浏览 0提问于2018-04-19得票数 9
回答已采纳
2回答
引导转盘设置自动高度
、、、
有没有办法不设置bootstrap carousel的高度，让它根据设置为100%的图像宽度自动计算出高度？我知道它会在幻灯片之间上下跳动，这很好。目前我在bootstrap html中有：
<div id="carousel" class="carousel slide carousel-fade" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
浏览 24提问于2016-08-18得票数 1
2回答
我的SCSS结构：
main.scss：
@import '~bootstrap/scss/functions';
@import 'theme/variables';
@import '~bootstrap/scss/bootstrap';
@import 'theme/theme';
theme.scss：
...
@import "utilities"
utilities.scss：
$utilities: (
"overflow": (
responsive: true,
浏览 2提问于2020-07-31得票数 2
3回答
我试图使用Bootstrap覆盖其他两个图像，如下代码所示：
<div class="row">
<div class="col-lg-8 col-md-8 col-sm-12 col-md-offset-2 col-lg-offset-2" style="border:solid 1px black">
<div style='position: relative; width:100%; height:100%; background:center; borde
浏览 4提问于2015-10-16得票数 2
回答已采纳
我要求我通过使用Bootstrap3添加了转盘指示器，并且我的转盘指示器看起来像矩形。我已经按照下面给出的代码编写了代码。
<div class="item active">
<img src="image/1.jpg" class="img-responsive">
</div>
<div class="item">
<img src=
浏览 1提问于2015-09-23得票数 1
我对Bootstrap 3非常陌生，我对网格系统有问题：。所有操作都远低于992。换句话说，<728 px我的两个div堆栈，>728 px --它们是水平的。然而，在992之上，它们再次叠加。我的目标是，我的两个div只用于“额外的小型设备电话(<768 is )”。更大的屏幕可不行。
这是我的html文件：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Testing</title>
<meta name="view
浏览 2提问于2013-08-13得票数 1
下面是示例，左边(黄色)单元是相关的。它不是引导特定的，但我使用它的类使映像响应。
<div class="container">
<div class="row">
<div class="col-xs-6" style="padding:30px; background:yellow">
<div class="wrapper">
<img class="center-block img-responsive" s
浏览 2提问于2015-05-19得票数 0
回答已采纳
2回答
我试图让一个图像浮动到页面的右边，它在大屏幕和中等屏幕上调整大小，但在小屏幕和Xtra小屏幕中消失。
我可以在引导中使用隐藏的sm和隐藏的xs使图像消失，但是我很难使图像(考虑到它太大)像附加的non-responsive图片一样在页面的右侧浮动。
我是否需要使用宽度：%进行此移动？我试过这个，但在响应等方面效果不佳。
这是图片的HTML：
<!-- PICTURE -->
<div class="container-fluid">
<div class="row">
<div class=&#
浏览 6提问于2016-01-30得票数 2
回答已采纳
3回答
我有一个问题，我相信我已经把范围缩小到DataTables响应式插件了。
所以在Bootstrap中，我有两列，每列6个。左边是一个DataTable，右边是一个div框。当浏览器缩小范围时，这两个项目应该拆分成各自的行，堆叠在彼此的顶部，项目居中。但是，在该断点处，DataTable不会调整大小以使其位于屏幕的中心。它一直在左边。如果您以该宽度刷新页面，它将自动居中，只是不会响应断点。
如果你反其道而行之，从手机大小的页面开始，并向外展开窗口，DataTable将在左侧的细列中保持压缩状态。
如果我去掉响应式插件，它会在断点处自动居中。然而，我想使用这个插件来帮助处理手机大小的桌子。
下面是
浏览 0提问于2015-08-22得票数 4
我的html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>@ViewBag.Title</title>
<link href="../../bootstrap/css/bootstrap.css
浏览 2提问于2013-08-16得票数 0
回答已采纳
1回答
自举宽度问题
、、
我使用的是Bootstrap版本4.5。我正在努力创建一个响应性的网站，我开始在大视野作为一个开始，然后建立我的方式移动。当我调整网站的大小时，它开始在右边形成一个很大的空白。您可以使用以下链接查看网站。那么，有什么原因会发生这个问题吗？我有以下的元，如果你需要更多的东西，你可以访问网站使用上述链接。注意:我试过改变盒子的尺寸和去除填充和边距。
#tutorials{
background-image: url("../Images/Header.png");
background-position: center 0%;
backgroun
浏览 1提问于2020-08-11得票数 3
回答已采纳
1回答
按照Bootstrap v5中的文档，我尝试使用scss添加一个游标实用程序类。我首先加载了_utilities.scss，然后(根据文档)：
@import "bootstrap/scss/utilities";
$utilities: map-merge(
$utilities,
(
"cursor": (
property: cursor,
class: cursor,
responsive: true,
values: aut
浏览 0提问于2020-12-21得票数 0
1回答
在滑块中安装视频(引导带4.0)
、、、、
对于我的学校，我必须做一个视频滑块的网站。我选择使用引导4.0。到目前为止，我从它得到了一个模板，并试图在其中一个滑块上放一个视频。不幸的是，这段视频不会全部播放。我想把它装在滑块里。(当然，在视频的左边和右边，只会是向右或向左滑动的箭头)现在看起来是这样的：
我想要的是：
下面是我使用的代码：
/*!
* Start Bootstrap - Half Slider (https://startbootstrap.com/template-overviews/half-slider)
* Copyright 2013-2017 Start Bootstrap
* Licensed u
浏览 0提问于2018-05-13得票数 0
回答已采纳
我正在使用Twitter Bootstrap制作我的第一个网站，并试图理解为什么我页面上的徽标图像在屏幕尺寸达到足够小时停止缩放并跳跃大小。
当前的行为让这个网站在iPhone上看起来很可怕。
图像文件本身是一个200x500px的.gif
下面是一个包含代码的jsfiddle：
下面是它所在的div中的代码：
<div class="row">
<div class="span1">
<img src="./HomePage/logo-02.gif" center alt>
</
浏览 0提问于2013-04-23得票数 1
回答已采纳
我有以下SASS样式定义：
@import "bulma/sass/utilities/initial-variables.sass";
@mixin show-sidebar-responsive($size) {
display: flex;
flex-direction: column;
height: 100%;
width: $size;
background-color: #24344b;
}
.sidebar-container {
transition: width 1s;
display: none;
浏览 0提问于2018-07-16得票数 0
回答已采纳
3回答
我做了一个有100列的行，每列都应该尽可能小。但正如您在下面的第13列中看到的那样，它的行为很奇怪。所有的图像和列都是使用相同的代码生成的，因此每个高度都应该相同。我确实知道bootstrap的12列规则，但我同意它在12列或40列左右。我在应用程序中没有宽度规则。此外，如果有人可以帮助图像响应，但列数不是，如果我缩小窗口，它会直接到每行一列，而不是11列，然后是10列，依此类推。 ? <div class="form-horizontal container" id="ActualHallOfLights">
<div clas
浏览 26提问于2019-02-12得票数 1
回答已采纳
我想要一个图像正好停留在屏幕的左边(把它固定在左边)。我希望图像从屏幕的侧面开始。我设法做到这一点
position:fixed; left: -15px;
从图像的角度看，它是从屏幕的左边开始，在我测试的每一个屏幕上。但它破坏了其他东西，即同一行的文本将在图片的顶部，如果我缩小窗口/屏幕大小，文本将变得更加混乱。有什么更好的解决办法？
我的代码：
<div class="row">
<div class="col-md-3" id="swoosh">
<i
浏览 5提问于2015-04-19得票数 0
回答已采纳
2回答
我的屏幕大小是这样的
27in. Monitor, Dell U2711: 2560px wide x 1440px high
17in. Workstation: 1920px wide x 1200px high
15in. Macbook Pro: 1680px wide x 1050px high
11in. Macbook Air: 1366px wide x 768px high
iPad (Landscape): 1024px wide x 768px high
iPad (Portrait): 768px wide x 1024px high
Nexus7 (Landscap
浏览 5提问于2015-03-30得票数 2
回答已采纳
2回答
我正试着将我用bootstrap 3开发的布局居中，无论我在之前的线程中尝试什么，它似乎都不居中。
我现在的代码是：
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9 text-center"> &
浏览 0提问于2016-11-28得票数 0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Creative - Bootstrap 3 Responsive Admin
浏览 4提问于2017-05-23得票数 0
回答已采纳
2回答
我正在尝试有一个响应式的输入和一个徽标在它的顶部使用bootstrap。我尽我所能去做这件事。不管我怎么做，列(gridsystem)，调整大小等等。结果是buggy。也就是说，当我缩小浏览器窗口的大小时，它就开始乱序了。
调整结果窗口的大小以查看所有内容是如何从部分中拉出的。
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
浏览 2提问于2014-08-01得票数 1
2回答
我正在尝试用不同的图像和不同的大小制作一个图片库。我已经包括了一个图像的链接，以解释我想要什么。我做了一个包含4个div的行，每个div包含一个图像。图像有宽度和高度。但是我的图片有不同的大小。即600X500。我正在使用Bootstrap。
如何让图像填满整个div (400X400)并仍然具有响应性？
我试图给图像一个固定的高度和宽度，但图像不再响应。
<div class="row">
<div class="square col-xs-6 col-md-3">
<div>
<img src="
浏览 2提问于2015-10-07得票数 0
1回答
如果文本大于屏幕，如何创建具有响应性固定图像的左div和具有可滚动文本的右div。当您调整页面大小时，只有右div更改并在屏幕小于1024 is时进入左div。
这是一张屏幕截图，展示了我要找的东西：http://www.500milligrammes.com/facticemagazine/final/fancy/brouillon2.jpg
浏览 0提问于2015-08-03得票数 1
回答已采纳
嗨，我正在尝试用bootstrap 3.3创建一个网站
然而，我遇到了一个问题，我正在使用的图像没有响应性，即在一段时间后，它会破裂。
这是HTML代码片段：
<div class="img-responsive" id="intro"> <!-- This is the container to display image-->
<div class="row">
<div class="col-sm-6 col-md-6 col-md-offset-3 "
浏览 1提问于2015-06-18得票数 1
Bootstrap 4中具有.img-fluid类的响应图像的大小调整不成比例。他们保持它的高度，即使宽度正在正确地缩小。这会使整个图像变形。有没有办法让它像Bootstrap 3中的.img-responsive类一样平滑？谢谢
<div class="col-sm-6">
<img class="img-fluid" src="/assets/blogs/14853991244821.jpg" alt="">
</div>
顺便说一句，这在Bootstrap4文档()中是一样的，示例
浏览 7提问于2017-01-26得票数 27
1回答
我在一个普通的屏幕上有3个项目(一次移动1个)的响应式引导转盘，但当你按下上一个按钮时，它看起来像是转盘中的图像被抛来抛去。有没有办法解决这个问题/我做错了什么？我似乎找不到脚本中的错误。 <!DOCTYPE html>
<html>
<head>
<title>Bootstrap Carousel</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.
浏览 11提问于2019-03-19得票数 1
我是响应式设计的新手，我现在正在玩twitter bootstrap responsive.css。我的项目遇到了一些麻烦。
问题是，我的左列不会崩溃(如果这是正确的术语)，或者不会堆叠。我想要的是，左边的列应该移到span8列的下方，并调整它的宽度。它现在所做的是，左侧列的宽度减小，并挤压其中的所有内容。我的目标是768x1024媒体屏幕的移动屏幕大小。
我布局的基本标记是，左侧为span8，右侧为span4。span4是我的其他块所在的位置。
<div class="row">
<div class="span8">
some
浏览 0提问于2012-08-12得票数 5
回答已采纳
我正在尝试创建以下设计： ? 我尝试过以下几种方法： .App {
font-family: sans-serif;
text-align: center;
}
#container {
height: 300px;
width: 300px;
overflow: hidden;
background-image: url(https://i.ytimg.com/vi/Vp7nW2SP6H8/maxresdefault.jpg);
}
#triangle-topleft {
width: 0;
height: 0;
border-top:
浏览 54提问于2021-08-10得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
