Bootstrap 4将3个图像与连接在一行上的链接对齐时出现问题
Bootstrap是一个流行的前端开发框架，它提供了一套用于快速构建响应式网站和Web应用程序的工具和组件。Bootstrap 4是Bootstrap框架的最新版本，它引入了许多新的特性和改进。
在Bootstrap 4中，要将3个图像与连接在一行上的链接对齐，可以使用Bootstrap的栅格系统和Flexbox布局来实现。以下是一种可能的解决方案：
- 使用Bootstrap的栅格系统，将图像和链接包装在一个行（row）中，然后将每个图像和链接放在一个列（column）中。可以使用col-md-4类将每个列设置为占据父容器的1/3宽度，如下所示：
<div class="row">
<div class="col-md-4">
<img src="image1.jpg" alt="Image 1">
<a href="#">Link 1</a>
</div>
<div class="col-md-4">
<img src="image2.jpg" alt="Image 2">
<a href="#">Link 2</a>
</div>
<div class="col-md-4">
<img src="image3.jpg" alt="Image 3">
<a href="#">Link 3</a>
</div>
</div>- 如果希望图像和链接在同一行上对齐，可以使用Flexbox布局。在父容器上添加
d-flex类和align-items-center类，以使子元素在水平方向上对齐，并垂直居中，如下所示：
<div class="row d-flex align-items-center">
<div class="col-md-4">
<img src="image1.jpg" alt="Image 1">
<a href="#">Link 1</a>
</div>
<div class="col-md-4">
<img src="image2.jpg" alt="Image 2">
<a href="#">Link 2</a>
</div>
<div class="col-md-4">
<img src="image3.jpg" alt="Image 3">
<a href="#">Link 3</a>
</div>
</div>这样，三个图像和链接将在同一行上水平对齐，并且垂直居中。
关于Bootstrap 4的更多信息和使用方法，您可以参考腾讯云的Bootstrap 4文档：Bootstrap 4 - 腾讯云
相关·内容
1回答
Bootstrap 4将3个图像与连接在一行上的链接对齐时出现问题
html、css、bootstrap-4
因此，我正在为一个班级项目做我的项目组合，我正在努力将我的项目排成一行。这是我有/需要帮助的…… <div class="container"> <div class="col-md-4">
<a href="httpsproject-tile">Howard Stern Tribute Page<
浏览 9提问于2019-02-04得票数 1
回答已采纳
2回答
引导拖放，每行有两个锚链接未对齐
html、css、twitter-bootstrap
我正在尝试使用Twitter Bootstrap 3和Font Awese4发出一个可撤销的通知下拉列表。我无法获得链接在一行中对齐，我尝试过：
<ul class="dropdown-menuclass="pull-right fa fa-remove&
浏览 3提问于2015-12-12得票数 0
回答已采纳
1回答
CSS:如何将一个分区与另一个部门的中心对齐？
html、twitter-bootstrap、css
我是网页设计的新手。我正在尝试制作一个盒子，包括一个图标和一个链接。当屏幕是膝上型电脑时，链接应该在图标的左边并垂直地与其中心对齐；当屏幕是平板电脑和手机时，图标应该在图标底部并与其中心水平对齐。下面是代码和图像链接： <div class="row">
<div class="col-xs-12 col-sm-1
浏览 4提问于2015-09-01得票数 1
3回答
将图像包装在引导行中的链接中
html、css、twitter-bootstrap
我花了比我更多的时间来承认，试图在一个row中获得一行图像为可点击链接，该链接使row中间的图像对齐，而并没有破坏引导响应性。链接工作良好，但由于图像大小的变化(虽然它们都是紧凑的高度景观)，对齐是关闭的。我可以让图像在div.row中垂直对齐，但它破坏了响应能力，并且图像没有适当调整大小。但
浏览 3提问于2016-06-08得票数 7
回答已采纳
1回答
土壤，NPOT纹理的问题
c++、opengl、soil
violation reading location 0x06851002 - VS2012快递这个错误是在AMD (5570)和英特尔(HD 4000)以及。
浏览 2提问于2013-08-09得票数 1
回答已采纳
2回答
使用Android的ConstraintLayout创建类似于表的视图
android、alignment、android-constraintlayout
我试图用最简单的形式将4 Views打包成2×2行。每一行包含1 ImageView和1 TextView，而不为ImageView设置任何固定的维度，并且允许TextView有多行而不省略。这样，两对图像和文本将水平对齐，它们各自的容器水平布局将对它们进行包装，以适应它们的内容，因此这两对将占用尽可能少的垂直空间：
上面的图像示意性地显示了UI组合场景。绿
浏览 0提问于2019-03-27得票数 0
1回答
在表格中制作图片库，但具有响应性
image、twitter-bootstrap、responsive-design、gallery、tabular
我正在制作一个摄影画廊，我在保持一切对齐方面遇到了问题。考虑到不同的纵横比，它们不会垂直对齐。我修复了这一点，为每个创建类，并包括填充顶部，特别是该宽高比，但有太
浏览 2提问于2015-12-10得票数 0
3回答
glPixelStorei(GL_UNPACK_ALIGNMENT，1)的缺点？
c++、opengl、alignment、textures、pbo
总是使用% 1的海藻有什么缺点？glPixelStorei(GL_UNPACK_ALIGNMENT, 1)它会影响现代gpus的性能吗？
浏览 2提问于2012-06-15得票数 31
回答已采纳
5回答
HTML图像与文本
html、css
代码：<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/> <div class="col-12 mb-3 col-md-6 text-center leftima
浏览 6提问于2020-02-10得票数 1
回答已采纳
1回答
将Biopac MP36与Simi运动连接起来
matlab、interface、interactive、labview
我需要同步的biopac MP36与Simi运动，以便当我们开始/停止录制一个设备，另一个做同样的。我知道biopac上有一个输入触发器和一个类比输出，我认为Simi的信号可能是光，但我不知道如何创建全局同步电路。我想可能我需要用Matlab或者LabVIEW来完成这个任务。
有人能帮我吗？
浏览 3提问于2017-11-13得票数 1
回答已采纳
1回答
将多个图像“链接”在HTML/CSS中的一条水平线上
html、css
我完全不知道如何制定我正在寻找的正确的结果，从搜索引擎获得有意义的结果。所以请给我指路。在HTML中，使用引导程序4或纯CSS/JS，我希望将多个可复制的图像放在同一行上--将它们与水平线“链接”在一起。下面是所需结果的屏幕截图：我试图用hr完成一些工作，并使用这个标记修改css，但我甚至找不到一种方法来对齐hr和img标记。
浏览 1提问于2020-02-25得票数 0
回答已采纳
2回答
如何使标题菜单垂直对齐&图标向左对齐
html、css
我试图为具有水平菜单选项卡(由指向其他html文件的链接组成)的网页创建标题，但我发现很难在与菜单选项卡相同的水平行上对齐图标，同时保持图标和选项卡的对齐方式不同(图标向左，选项卡向右)。当我将图标与链接从同一个组中移出，并使用css使它们以不同的方式对齐时，结果是这两个图标(图标和制表符)位于不同的行中。我甚
浏览 5提问于2017-06-06得票数 0
回答已采纳
1回答
使用bootstrap4 Flex时列高度不相等
css、twitter-bootstrap、flexbox、alignment、bootstrap-4
我正在使用Boostrap4，并试图创建一个简单的4*4网格的div，其中有一个图像和一些文本。最初，我尝试在一行中嵌套6列，结果如下所示：所以这里的问题是图片不在列的中心。因此，接下来我在行上使用了text-center。这很有效，但现在当我希望文本与图像的左侧对齐时，文本也会居中：所以我最终放弃了所有
浏览 1提问于2018-05-14得票数 0
1回答
包含div外部的项目上的折叠样式行为
jquery
我有一个图像列表-每行3个。我有3行图像与相同的设置。从本质上讲，我希望所有的项目都显示在一个网格中。如果项目1,2或3被点击，我想直接在第一行图像下面，但在第二行图像之前显示它们的相关信息，以及允许一次只打开一个信息div。<ul class="thumbnails"
浏览 0提问于2013-07-21得票数 1
回答已采纳
1回答
引导Navbar内容堆叠
html、css、twitter-bootstrap
这里的新手。我直到今天才开始使用Bootstrap来开发一个网站，但是有些事情正在发生，我不知道。;"></a> </div>
其思想是，有一组链接对齐左，并显示一个标志对齐的权利。现在我已经注意到，只要浏览器窗口的大小大于768 as (引导css仍然将宽度分配给.container)，这就可以很好地工作，但是当窗口变小(我相信.c
浏览 0提问于2014-02-17得票数 0
回答已采纳
2回答
在Qt中使用SQLite自定义函数
c++、qt4、sqlite
我正在尝试为我在Qt中使用的SQLite数据库创建一个自定义函数。我找到了有关如何创建函数的信息，它似乎在x86系统上工作正常。static bool createSQLiteFunctions(const QSqlDatabase& db)// Get handle to the driver and如果删除对createSQLiteFunctions的调用，一切都会正常工作。你知道为什么结果是一个段
浏览 2提问于2011-06-09得票数 3
回答已采纳
2回答
如何解决引导-3和引导-4的差异问题？
angular、bootstrap-4
我正在用一个有点老的教程学习角，因为指导员使用的是引导3.3.7，目前我已经下载了引导4.4.1版本，我无法跟随指导员并实现一些未来(图标)。抱歉，英语不太好，非常感谢！
浏览 5提问于2020-02-14得票数 2
回答已采纳
1回答
Bootstrap 4旋转木马，背景纯色，图像在右，文本在左
html、css、twitter-bootstrap、responsive-design、carousel
请原谅，如果我是问一些愚蠢的事情，但我有一个要求创建一个完整的页面滑块与纯色的背景和一些文字在左边和右边的图像。就像一样。目前我想要的结果是我用过Bootstrap 4的Carousel我稍微修改了一下，并把它的背景变成了与谷歌图片中一样的灰色。现在我希望文本左对齐，并在右侧有一个响应式的自动调整大小<e
浏览 8提问于2019-11-04得票数 0
回答已采纳
3回答
如何获取多个图像以适合父容器的确切宽度？
html、css
我在一个容器里有4张图片。当我设置图像占据容器的50%时，顶部的2层和底部的2层，它完美地匹配了容器的边缘，就像我想要的那样。当我添加边距时出现问题。图像堆叠在一行中，这意味着对于容器来说，边距太大，所以它们堆叠在一行中我将图像的宽度设置为49.5%，并将右边距设置为0.5%。问题是右
浏览 0提问于2021-02-14得票数 0
1回答
如何使两列中的一列的文本在标题变为两行后与其他列的顶部标题图像对齐
css、multiple-columns、vertical-alignment、text-alignment
我在一个包装器div中有两个并排的div。在左列中，有一个上面带有标题的图像。在右栏中，有许多链接。links div有一些顶部填充，用于将第一个链接的文本与左列中的图像对齐。但是当屏幕尺寸改变时，左列图像上的图像标题就会分成两行。当发生这种情况时，右div上的</e
浏览 4提问于2019-09-03得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
