使用bootstrap将每个项目旁边的项目对齐
使用Bootstrap将每个项目旁边的项目对齐可以通过使用栅格系统来实现。栅格系统是Bootstrap提供的一种灵活的布局系统，用于构建响应式网页设计。下面是如何使用Bootstrap来对齐每个项目的步骤：
- 引入Bootstrap：在HTML文件的头部引入Bootstrap的CSS文件和JavaScript文件。可以通过以下CDN链接引入Bootstrap：
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>- 创建栅格布局：使用Bootstrap提供的
container和row类来创建容器和行。在容器内部创建多个列来容纳项目。
示例代码：
<div class="container">
<div class="row">
<div class="col-md-4">项目1</div>
<div class="col-md-4">项目2</div>
<div class="col-md-4">项目3</div>
</div>
</div>在上述示例中，使用col-md-4类为每个项目创建了一个占据4列的列。这意味着在中等屏幕以上的设备上，每行最多可以容纳3个项目，并且它们将平均分布在行内。对于小屏幕设备，列将自动堆叠在一起。
- 样式定制：如果需要自定义样式，可以根据Bootstrap提供的CSS类来修改项目的外观和排列方式。可以参考Bootstrap的官方文档了解更多样式定制的方法。
这样，使用Bootstrap的栅格系统，可以将每个项目旁边的项目对齐并实现灵活的响应式布局。
相关·内容
我挣扎着用自动布局对齐5个项目，如故事板中所示。
我可以对齐下面突出显示的3个项目，但2之间只是不想对齐。
我试过将项目钉在每个项目旁边的按钮上，并设置大小，但它们拒绝正确地对齐。还尝试将两个错误的按钮设置为如下所示的引导和测试容器，但这些按钮仍然没有正确对齐(甚至是紧密对齐)。
我做错了什么吗？
浏览 4提问于2015-02-04得票数 1
回答已采纳
2回答
表单-垂直样式
、、
我对我的项目使用，正如您可能知道的，默认的表单对齐方式是垂直的，所以标签显示在表单字段的上方。您可以添加类form-horizontal以在表单域旁边显示标签。
我正在构建一个水平显示的表单，但我希望表单的一个子集是垂直对齐的。因此，我向该部分添加了类form-vertical，但它不会更改任何内容。
所以我查看了bootstrap样式表，其中没有form-vertical类的声明。
您有什么建议来解决(或变通)这个问题吗？
浏览 2提问于2012-10-12得票数 0
回答已采纳
我有派图。就像你可以看到传说中的项目在彼此旁边一样。
是否可以在两列中对齐图例项？
对不起我的英语。
浏览 1提问于2014-02-11得票数 1
回答已采纳
1回答
我将Angular与Bootstrap结合使用，当在搜索输入字段旁边放置一个字形图标时，上边界似乎不对齐。
div.input-group(ng-show='feeds.length > 0')
span.input-group-addon.glyphicon.glyphicon-search
input.form-control(type='text', data-ng-model='filterText')
需要对CSS (或其他)进行哪些修改才能对齐它们的顶部边框？
请参阅Jsfiddle：
浏览 2提问于2014-05-14得票数 0
5回答
使用Bootstrap版本2.3.2，我有一个表单布局，类似于下面的图像，而且由于复选框有一个内联标签，因此存在对齐问题。
向input[type="checkbox"]添加页边距只会给复选框留出页边距，而不是内联标签。如何使复选框及其标签垂直对齐其旁边的文本字段？
这是，如果您感兴趣的话。
浏览 4提问于2013-10-11得票数 14
回答已采纳
2回答
如何垂直对齐h1标记旁边的徽章(较小的)。我不想将 span 标签放入 h1 标签中，原因是：
现在，它在底部对齐。我想把它放在中间。
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div style="width:350px;">
<h1 class="d-inline">This is a Test This is a T
浏览 7提问于2022-06-20得票数 0
回答已采纳
我在Bootstrap中有一个列表项目，它在一个无序的列表项目中使用了2个跨度标签。
我希望在垂直和水平居中，然后堆叠在列表项目文本上方的字形图标。
此外，在活动状态和悬停状态下都保留text-decoration:none；。
如何为此创建css3？
<nav>
<ul>
<li>
<link href="#" title="HOME">
<span class="glyphicon glyphicon-globe"></span>
<span class
浏览 0提问于2015-06-30得票数 0
我有一个table和一个form，一个在另一个旁边的Bootstrap。我已经对form应用了well类，以使它与众不同。但是，well和包含的form不对齐吗？
请看我的fiddle 。
如何对齐well和form？(请注意，当table和form都有span6类时，一切都很好。但是，我想分别使用span7和span5。)
浏览 0提问于2013-01-08得票数 0
回答已采纳
4回答
我正在使用Bootstrap 3和。
假设下面的HTML包含所有默认的Bootstrap CSS，"New Url“旁边的加号图标明显小于如下所示的文本：
<ul class="nav navbar-nav navbar-right">
<li><a href="../navbar/">Default</a></li>
<li><a href="#">New URL<i class="icon ion-ios-
浏览 5提问于2016-01-12得票数 0
3回答
如何在bootstrap下拉列表中右对齐下拉切换？这是我的代码和一个jsfiddle，你可以看到向下的箭头在文本旁边，我希望它在右边。
<div class="dropdown">
<button class="btn dropdown-toggle btn-block text-left" style="background-color: white; border-color:#dee4ed" type="button" id="dropdownMenuButton" data-to
浏览 1提问于2017-10-05得票数 5
回答已采纳
在我的VueJS应用程序中使用bootstrap-vue，我想在一行中放置一个按钮和一个警告，两个项垂直居中对齐。
正如您在此中看到的，按钮是对齐的，但警报没有对齐。
如何对齐所有项目？
浏览 1提问于2020-12-23得票数 0
1回答
我想要创建一个表单，并在它旁边有一个复选框。目前，它看起来如下：
因此，复选框与表单的标签对齐，即它们在顶部对齐，但我希望两者在底部对齐。
应如何做到这一点？
这是我的密码：
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link
浏览 1提问于2018-04-11得票数 1
回答已采纳
3回答
将按钮插件输入与文本对齐
、、、
我有一个表单与2个输入，文本输入和提交表单的按钮。
在此表单的旁边，左侧有文本。
我希望将左侧的文本与文本输入字段对齐。
这里有一个小提琴：
CSS代码：
.text, .form{
display: inline-block;
}
HTML代码：
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<div class="container">
<p class=&
浏览 32提问于2019-10-31得票数 1
我有这个HTML：
<html>
<head>
<link href="bootstrap.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<form method="post" enctype="multipart/form-data">
<table class
浏览 2提问于2016-07-01得票数 0
我有一个简单的表单与一个图例使用Twitter Bootstrap。我想要能够在这个时间点上把东西放在我的图例文字旁边，这些图标是正确对齐的。
我已经尝试了几个标签，比如div，它会将图标推到图例线的底部。我希望这与图例文本对齐。
一个简短的例子。
<legend>Contact Categories<div align="right"><i class="icon-comment"></i></div></legend>
这将导致图标完全落在图例线上。图例本身仍然是它应该的样子。
浏览 4提问于2012-10-21得票数 3
回答已采纳
2回答
将标题栏定位到侧边栏旁边
、、、
我使用的是bootstrap，我想在侧边栏的右边添加一个标题栏，这样它就会对齐到它旁边，而不是坐在顶部。侧边栏也是可折叠的，所以一旦侧边栏被折叠，页眉就必须扩展到整个页面。
侧边栏代码：
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<a href="#
浏览 2提问于2016-09-14得票数 1
在下面正在构建的网页上，您将在左上角的中看到公司名称旁边的一个白框
这是一个基于twitter-bootstrap的网站，来自FontAwesome的白盒“字形图标”。我似乎无法减少白色框的大小(也许25%左右是理想的)，而不让图标与公司名称对齐。能否请您在网站上“查看源代码”，看看您是否能够确定正确的代码更改？
浏览 1提问于2013-05-22得票数 3
回答已采纳
我已经启动了一个Rails项目，并在其中实现了bootstrap-sass。不久之后，我发现了一个使用不同版本的twitter bootstrap的主题/模板。我已经将模板添加到应用程序中，但视图并不像预期的那样完全对齐。然后，我将主题/模板附带的特定资源添加到我的项目中(例如jquery版本，另一个较旧的引导版本)，结果几乎是完美的。然而，仍然存在一些对齐问题。当我检查CSS时，我可以看到这是由于两个版本的bootstrap之间的冲突而发生的。
我在想，我应该让这个模板只使用它附带的twitter bootstrap版本。如果是这样，我该怎么做呢？如何使rails视图只使用某个css样式表，
浏览 0提问于2012-10-13得票数 3
回答已采纳
我有一个使用bootstrap 2可下载文件的rails项目。我注意到，在成功推送到heroku之后，页面的对齐方式消失了，这是由bootstrap 2对齐失败引起的
有没有办法让bootstrap推送到heroku？
浏览 1提问于2013-12-14得票数 0
我在我的ThingSpeak IoT项目中使用了高级图表。
除了这些事情之外，一切都很好，这让我很生气(我一个人找不到解决办法.在过去的3天里，我一直在尝试我的frind，但没有成功)。
这是我的项目页面：
我的问题是： 1)我看不到Y轴旁边最上面的数字(我只能看到勾号，而不是数字-如果你检查浏览器控制台，它在那里，但它有错误的X和Y坐标) 2)我不能对齐所有Y轴的“勾标”-我想把它们对齐“在”标记，但现在仍然有“之间”.是的，为此我使用了加法变量:( 3)我想对每一系列数据独立使用小数位设置，例如温度将有小数位，腐殖系数将有0小数位等等，这是可能的吗? 4)我添加了主要的滴答，但添加小滴答没
浏览 4提问于2020-03-24得票数 0
回答已采纳
我将一个站点从Bootstrap 4 alpha 6迁移到Bootstrap 4 Beta 1。
<ul class="nav navbar-nav list-inline">
<li class="list-inline-item"><a class="social-icon text-xs-center" target="_blank" href="#">FB</a></li>
<li class="list-inline-ite
浏览 1提问于2017-08-12得票数 47
如果我有一个表单，在纯HTML格式的输入旁边有一个标签，并且这两个表单都是内联的(或内联的块)，那么它们就会按照基线对齐。但是当使用bootstrap并将输入放在输入组中时，它们似乎被底部对齐了。
我试着在没有bootstrap的情况下复制它，但我做不到，它就是工作。我创建了fiddle来显示问题：
HTML是：
<p>A case working, with just an input:</p>
<div class="form-group without-input-group">
<label>label</
浏览 2提问于2014-04-29得票数 3
2回答
这是大桌子的一部分。我有三个字段，每个字段应该有一个删除按钮对齐在它旁边。
我所拥有的CSS只对齐第一个按钮，而其他按钮处于相同的位置。我怎样才能把另外两个按钮放在他们的字段旁边。
谢谢!
td .btn.aligned {
position: absolute;
margin-top: 7px;
float: right;
margin-left: 5px;
}
td input {
float: left;
margin-bottom: 10px;
}
<link rel="stylesheet" href="https://ma
浏览 3提问于2017-05-18得票数 1
回答已采纳
1回答
在中间垂直对齐文本
、、、
我想知道我是如何做到图像旁边的文本在中间垂直对齐的，这样在它旁边出现的图像就更有秩序了。启动代码片段，通过单击全屏查看，您可以看到我说的话。
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js&#
浏览 0提问于2019-09-05得票数 0
回答已采纳
2回答
我正在使用Bootstrap 3，我试着在每个other.Below is my旁边放两列。
我正在尝试将过滤器下拉框带到导出旁边，使它们之间的间距更小
浏览 0提问于2015-10-15得票数 0
我正在将一个网站从Bootstrap 3.7迁移到Bootstrap 4。在我的网站上，顶部有一个横幅，看起来像这样：
+-----------------------------------------------------------+
| Item 1 Item 2 Item A Item B [note] |
+-----------------------------------------------------------+
左边的项目是动态的。右侧的项目是动态的。这张纸条偶尔会出现。我已经在Bootstrap 3.7中正常工作了。
浏览 18提问于2017-08-29得票数 5
回答已采纳
我正在使用bootstrap开发我的第一个网站。我使用javascript将我的图像垂直居中，但我注意到，有时javascript会在一些图像之前加载，因此这些图像不会居中。
Html：
<div class="hidden-xs col-sm-3 text-center">
<img src="../img/body/gear.png" alt="gear.png" class="scale-icon pull-center" />
</div>
JavaScript：
<
浏览 0提问于2015-10-22得票数 0
我希望定位寻呼、更改长度和信息控件，如下所示：
并有以下代码：
"dom": '<"top"f>rt<"bottom"pli>'
但是，我得到的是这个布局，这不是我想要的：
有什么想法吗？
更新
信息控件需要对齐，长度更改控件位于信息控件旁边，寻呼控件位于长度更改控件旁边。请看上面更新的照片。
浏览 2提问于2020-09-11得票数 1
回答已采纳
1回答
我在我的应用程序上使用bootstrap，并且很难使用bootstrap垂直对齐一些项目。它由一个引导程序行和3个span4组成，其中包含一个搜索栏、一个标题和导航链接。
这是骨架：
<div class="row">
<div class="span4">
form code, as generated by rails form_for
<div class="span4">
Page title
<div class="span4">
pagi
浏览 1提问于2012-12-20得票数 0
回答已采纳
我是网络前端开发的新手，虽然我有后端和嵌入式编程经验.
我正在学习前端开发使用Bootstrap。我编写了这个简单的引导代码(可用的)作为练习。
我观察到的是，当我在240 on宽显示器上查看输出时，navbar的元素垂直叠加。如何阻止navbar元素垂直堆叠，并在显示宽度减小时保持其水平对齐。如果我从select中删除navbar元素，那么navbar极右的“切换条”按钮将与极左的"navbar品牌“保持水平对齐。但如果将select元素添加到"navbar品牌“旁边，则"navbar品牌”、“select元素”和“切换条按钮”垂直堆叠。
另外，当显示大小增加到不同大
浏览 1提问于2016-07-01得票数 0
回答已采纳
在TextView中有一个复合可绘制选项，可以避免使用父ViewGroup和TextView旁边的ImageView。这是整洁和更快的性能，正如lint所说的那样。我正试着做一些类似的事情。一个TextView，里面有两个文本，一个左对齐，另一个对齐写入。听起来很奇怪，但它只允许单行TextView。
为此，我可以扩展TextView并将其重心设置为右侧。在onDraw内部，让超类在右侧绘制，然后在左侧绘制文本。
问题是，我对这一切都不是很确定。我的问题是，会有很大的性能差异吗？我没有任何较慢的设备来测试。我将在GridView的项目布局中使用这个TextView，项目布局已经有很多视图，如果
浏览 5提问于2014-01-10得票数 0
1回答
关于这些UIButtons的问题
、、、、
我怎样才能得到像这个图片底部那样的UIButton (移动和删除)？具体地说，我想要一个带有这样的文本的图像。，谢谢。
对于Jason:图像就贴在标签旁边。在IB中有没有我可以将它设置为左对齐，而标签对齐到右？下面是它现在的样子：
浏览 0提问于2011-05-16得票数 0
回答已采纳
8回答
我有非常基本的和已知的形式场景，我需要正确地对齐输入旁边的标签。然而，我不知道该怎么做。
我的目标是标签在右侧的输入旁边对齐。以下是所需结果的图片示例。
我做了一个小提琴是为了方便你，并澄清我现在的情况--
代码片段：
<div class="block">
<label>Simple label</label>
<input type="text" />
</div>
<div class="block">
<label>
浏览 3提问于2012-03-13得票数 154
回答已采纳
在chrome/safari中，在产品标题旁边可以看到方形项目符号，并且对齐方式不正确。
Firefox &即使是IE，布局看起来也是正确的。向h5添加填充可以修复产品图像和标题的对齐方式，但会破坏工作浏览器中的布局。
有什么想法吗？
浏览 0提问于2013-02-06得票数 0
2回答
我正在尝试创建一个导航，左边是项目名，右边是状态。我想将这两个项目放在同一个列表中，但我的问题是，我不能将状态文本向右浮动，仍然向左调整。
这就是我想要创造的
这是我当前的HTML
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="col-xs-4">
<p class="list-title">Blu
浏览 0提问于2017-06-20得票数 0
回答已采纳
2回答
我正在尝试将buttons沿着第2 spans对齐。2 spans是在彼此之上的，我想在第二个span旁边显示button。
这是我的CSS：
/* Styles go here */
.contacts {
position: absolute;
top: 0;
left: 70px;
}
.contacts .name {
font-weight: 700;
display: block;
}
li {
position: relative;
margin-bottom: 30px;
}
<!DOCTYPE html&
浏览 3提问于2016-05-27得票数 4
回答已采纳
我目前使用的是bootstrap 4.0。下拉菜单位于屏幕的右上角。当用户单击下拉菜单时，菜单会使页面向右略微扩展，以便在导航栏旁边显示空白。 它看起来是这样的： ? 这是我使用的代码： <div class="dropdown dropdown-left">
<button class="btn btn-secondary dropdown-toggle bg-dark" type="button" id="dropdownMenuButton" data-t
浏览 41提问于2021-09-13得票数 1
3回答
我想有一组JRadioButtons和旁边的每一个小‘我’的图像，当点击时，将打开一个新的窗口，有关文本的信息旁边的单选按钮。用来对齐单选按钮旁边的小'i‘标签的最佳组件是什么？
浏览 0提问于2010-03-11得票数 0
回答已采纳
我有一些文本(p元素)和两个按钮在它旁边。然而，这两个按钮看上去并不像文本(p元素)那样水平对齐。按钮似乎略低于课文。
如何使它们看起来像在水平水平上一样？
代码片段：
body {
background-color: rgb(44, 63, 83);
}
#timer {
margin-top: 1%;
}
#time-p {
color: white;
font-family: Helvetica, Arial, sans-serif;
font-size: 3rem;
display: inline-block;
co
浏览 8提问于2021-03-10得票数 2
回答已采纳
我在一个流体布局中有许多组合框，它们在彼此的旁边出现。
如果没有足够的空间来显示与彼此相邻的组合框，我希望组合框在下面包装。
下面是我到目前为止所拥有的东西的一个小提琴-
在布局hbox的容器中，项目对齐正确，但似乎没有包装溢出。
Ext.create('Ext.panel.Panel', {
title: 'Combo boxes',
width: '100%',
layout: 'vbox',
items: [{
xtype: 'container',
layout: 'hbox
浏览 4提问于2016-12-16得票数 0
回答已采纳
1回答
我使用MaterializeCSS框架，我想在右边对齐图片，就在其他项目旁边，我将img标记添加到其中一个项目，但是它只显示在徽标旁边，而不是在右边。
<div class="nav-wrapper">
<a href="index.html" class="brand-logo"> Logo</a>
<a href="#" data-activates="mobile-demo" class="button-collapse"><i c
浏览 1提问于2018-02-18得票数 0
回答已采纳
3回答
我是布局在一个引导应用程序的内容。我的内容排成了一排。目前，我有以下几点：
<div>
<span class="badge">{{rowNumber}}</span>
<a ng-repeat="item in items" style="display: inline-block; margin:4px padding:0px 8px;">
{{item.name}}
</a>
</div>
如果我的集合有4个项目，则项目是水平排列的，与左边对齐。我需
浏览 2提问于2014-10-27得票数 3
回答已采纳
2回答
我有这个代码片段，但它在换行符之后呈现下拉列表，什么是最好的bootstrap 3col类来正确地完成它？(选择input medium-inline旁边的下拉列表)
<form class="form-horizontal well" >
<div class="form-group">
<label class="col-lg-2 control-label">Memory</label>
<div class="col-lg-4">
浏览 0提问于2014-03-24得票数 11
回答已采纳
6回答
我想在一些文本旁边显示一个YUI按钮，但是YUI按钮文本的基线与它旁边文本的基线不一致。字体系列和字体大小对于按钮文本和它旁边的文本都是相同的。
如果我使用一个普通的HTML按钮，文本基线将正确排列。
如何使文本基线对齐？
浏览 7提问于2009-06-24得票数 1
1回答
页面对齐上面的链接
、、、
有没有人知道如何让你的链接坐在你的背景图片和页面内容之上，而不是内联在你的页面旁边。
例如:主页下的联系人等:页面的其余部分。背景和页面内容。
现在，作为它的立场，我的链接是排在左边的页面，右边是它的背景和页面内容。
我该怎么解决这个问题？
浏览 3提问于2022-04-15得票数 0
2回答
我似乎无法在左边第一列的导航栏旁边找到我的主页。我已经创建了一个主页，它在导航栏下，但应该在它的右边。我试过添加一个容器，但没有用。对我怎么做有什么建议吗？输出应该是左侧的导航条和右侧的内容。
主页
{% extends 'layout.html' %}
{% block body %}
<div class="jumbotron text-center">
<h1>Welcome To myStocks Page</h1>
<p class="lead">
浏览 3提问于2019-02-24得票数 2
回答已采纳
我希望list-style-image出现在右对齐的列表旁边.我该怎么做？我应该移动位置还是对齐？
浏览 4提问于2022-07-09得票数 -3
1回答
可能重复：
我试图找出这个CSS文件中“垂直对齐:中间”属性旁边的星号(*)是什么意思：
button, input, select, textarea {
font-family: sans-serif;
font-size: 100%;
margin: 0;
vertical-align: baseline;
*vertical-align: middle;
}
此外，为什么要重复两次“垂直对齐”，星号值与第一个不同？
我知道类名旁边是什么意思，但我从未见过它在属性旁边。
浏览 4提问于2012-07-01得票数 6
回答已采纳
2回答
浮动框旁边列表的左边距
、、、
我想把一个列表放在浮动框旁边。问题列表中，列表项的要点显示在主体块框之外。因此，项目的文本与普通文本是对齐的，而不是项目要点。
下面是代码示例：
如果我使用list-style-position: inside;，它的工作方式与预期一样，项目是单行的。另一种解决方案是将整个列表放入一个额外的框中，或者给它一个display: inline-block;。但是这样列表项就会在盒子周围浮动了。
我的要求是：
弹着点旁边的浮动框应该缩进，就像没有浮动盒。
在多行项目中，要点应保留在文本的“外部”。
列表仍应浮动。
这可能吗？
浏览 1提问于2014-06-12得票数 0
4回答
我正在尝试将文本字段与引导程序对齐，但是我一直未能采用我在源代码中找到的任何内容到项目中。我试图做的是对齐电子邮件和密码文本字段，但留下‘记住我’和‘登录’为中心。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.
浏览 3提问于2015-07-21得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
云直播活动推荐
腾讯云开发者
