为什么bootstrap grid把我的右对齐的li放到下一行？
Bootstrap Grid是Bootstrap框架中的一个组件，用于创建响应式的网格布局。它使用了CSS的弹性盒子模型，可以将页面分割成12个等宽的列，通过将列组合在一起，可以创建出各种不同的布局。
当使用Bootstrap Grid时，如果将右对齐的li放到下一行，可能是由于以下几个原因导致的：
- 列宽不够：Bootstrap Grid将页面分割成12个等宽的列，如果右对齐的li所在的列宽度不够容纳li的内容，就会导致li被放到下一行。可以尝试调整列的宽度，或者使用更小的字体大小来解决这个问题。
- 列的顺序：Bootstrap Grid中的列是按照从左到右的顺序排列的。如果右对齐的li所在的列在其他列之前，就会导致li被放到下一行。可以尝试调整列的顺序，将右对齐的li所在的列放到其他列之后。
- 响应式布局：Bootstrap Grid支持响应式布局，可以根据不同的屏幕大小自动调整布局。如果右对齐的li在较小的屏幕上被放到下一行，可能是因为在较小的屏幕上，列的宽度不够容纳li的内容。可以尝试使用Bootstrap提供的响应式类来调整布局，或者使用自定义的CSS样式来解决这个问题。
总之，要解决Bootstrap Grid将右对齐的li放到下一行的问题，可以尝试调整列的宽度、顺序，或者使用响应式布局的相关类来适应不同的屏幕大小。
相关·内容
1回答
如何获得不同长度的网格项来包装？
css、css-grid
使用repeat()和auto-fit / auto-fill函数，当列或行有定义的长度模式时，很容易获得网格项。
在下面的示例中，所有列的最小宽度为100 of，最大宽度为1 1fr。
#grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-gap: 1em;
}
#grid > div {
background-color: #ccddaa;
padding: 10px;
}
<div id="grid">
浏览 2提问于2017-11-02得票数 12
回答已采纳
2回答
具有列顺序的响应式多列列表
css、css-grid
我正在尝试创建一个有序的多列列表，但我正在努力处理CSS网格布局规则。
期望的结果应该是响应性的。在小屏幕上有2个网格列，在大屏幕上最多有4个，同时保持列的顺序。
而不是像这样排序：
1 2 3 4
5 6 7 8
9 10 11 12
13 14 15
它们应该是这样排序的：
1 5 9 13
2 6 10 14
3 7 11 15
4 8 12
我觉得我和很亲近。
ol {
margin: 0;
padding: 0;
list-style: none;
background-color: grey;
display: grid;
grid
浏览 0提问于2017-07-02得票数 9
2回答
当其他网格仍然完好无损时，将一个启动带网格堆放到另一个
twitter-bootstrap、twitter-bootstrap-3、responsive-design
我正在用Bootstrap建立一个网站。我仍然是新的启动，现在仍然挣扎在响应网格设计。
所以我的问题是，如果我想在屏幕大的时候有4列的行，但是当屏幕是中等的时候，我希望它变成3列，其中的一列被堆放到另一列(即第3列堆积到第4列的顶部)。
为了明确起见，我将说明我的设计：
屏幕大时的：
当屏幕是中等时，变成：
列(材料堆叠到实栏栏的顶部)：
上面的图片只是我用html表创建的虚拟图片。
如何做到这一点？这是可行的使用纯引导css？
浏览 3提问于2017-02-12得票数 0
回答已采纳
2回答
这个问题适用于Omega主题，但我认为它对于任何基于网格的响应主题都是通用的。
是否有一种方法使<li>占据2或3个网格，取决于屏幕宽度？
换句话说，当body标记有类responsive-layout-wide时，<li>应该占据3个网格(就好像它有omega类grid-3)，而当主体有类responsive-layout-normal时，它应该占据2个网格(就好像它有omega类grid-2一样)。( body类由Omega主题使用媒体查询确定)
当前的HTML如下所示：
<li class="mydiv grid-2-normal grid-3-wi
浏览 0提问于2012-07-14得票数 0
回答已采纳
4回答
机器人按钮被切断(LinearLayout水平)
android、android-layout
在我的应用程序中，我调用API获取一些信息(地址、电话号码等)的人名单。在每个电话号码下，我创建程序3个按钮(添加到联系人，编辑和电话)。问题是，最后一个按钮被切断了(小屏幕)。我使用线性布局水平。
是否有任何方法来控制屏幕的大小，如果需要的话，把最后一个按钮放到第二行？当我旋转屏幕到景观，我有足够的空间，所以按钮应该保持在一行。
现在，我使用的是horizontalScrollView和可见滚动条。它起作用了，但我对它不太满意。
谢谢你帮忙。
浏览 4提问于2016-02-03得票数 2
回答已采纳
1回答
使用Twitter Bootstrap的响应式布局
jquery、html、css、twitter-bootstrap
我正在尝试使用bootstrap构建一个响应式布局。我搞不懂如何编写下面的代码，以确保它能自然地使用bootstrap。
根据推特约定，我已经在使用div.row和div.span12了。在这个区域内，我有一个边框，如下所示。
有一个带有边框的盒子，在盒子里面我需要有三个等宽的跨度。我如何使用bootstrap实现这一点。
浏览 1提问于2012-09-21得票数 0
回答已采纳
1回答
Singularitygs:保持所有屏幕大小的移动网格
singularitygs
出于某种原因，我的网格只显示所有屏幕大小的移动(3列)网格。我正在使用下面的值，不明白我做错了什么。如有任何建议，欢迎
@include add-grid(3);
@include add-grid(6 at 320px);
@include add-grid(12 at 740px);
@include add-gutter(1/3);
我正在使用下面的宝石
Using sass 3.3.14
Using breakpoint 2.5.0
Using singularitygs 1.2.1
浏览 3提问于2014-08-17得票数 2
回答已采纳
4回答
& rails -中心内容和固定最小宽度
ruby-on-rails、twitter-bootstrap、responsive-design、twitter-bootstrap-rails
在我的html中，内容应该集中在屏幕上，他的宽度永远不应该大于950 my。
由于我希望在移动和桌面上显示相同的html，所以我使用twitter引导使布局响应。
问题是:我似乎不能使内容div的中心和最大宽度为950 max。
当我在浏览器上打开时，css具有以下媒体查询：
@media (min-width: 1200px)
这使我的div始终适合整个屏幕。
我怎么才能解决这个问题？
基本上我想做的是这样的事情：
橙色线是容器(或身体)，蓝色是行。
谢谢你的帮助。
编辑
只是我发现也许能帮助别人帮我
如果我评论一下这句话：
@import "twitter/bootstr
浏览 8提问于2012-08-10得票数 3
回答已采纳
3回答
“必须”在img标签上写宽和高？
html、css、twitter-bootstrap、responsive-design
关于本文：
和我读过的其他文章一样，在img标签中写宽和高是“必须的”。但也许现在情况有所改变，响应式WebDesign被弃用了，我猜？
所以，我正在使用Twitter Bootstrap，并发现在img-tag上使用固定的宽度和高度有问题。在我的css中，我使用：
width: 100%; height: auto
然后它在每台设备上都能正确缩放。但是，当我不提供图像的宽度和高度值时，加载时间或其他什么会明显变慢吗？此外，有没有其他方法可以像Twitter Bootstrap那样解决这个问题？
浏览 2提问于2013-08-31得票数 2
1回答
为什么在页面的右边会有一个空白处？
twitter-bootstrap、galleria
我使用Bootstrap和Galleria制作了一个页面。这是一个带导航栏的画廊页面，所以我试着让画廊尽可能多地放在剩余空间中。它的宽度被定义为100vw，所以它应该只填充页面的其余部分，但它有一个在正常元素结束之前开始的边距，这将为页面创建一个滚动条。我可以用body{ overflow: hidden; }移除横条，但这样做有两个问题：
1)箭头按钮与页面边框的间距不对称，
2)在故障边界的小屏幕上有一个很大的空白区域，这只是之前问题的延伸，但更明显，会对移动端造成不利影响。
下面是代码：
浏览 8提问于2018-01-12得票数 0
1回答
导航菜单在其他屏幕上看起来较小的问题
html、css、menu、navigation
因此，在我的屏幕上，导航栏几乎延伸到屏幕的尽头，而在更大的屏幕上，导航栏没有达到预期的限制。我是一个创建网站的初学者，所以我想寻求帮助来解决这里的问题。我试过使用宽度百分比，但当我把屏幕变小时，内容变得杂乱无章，这是我不想要的，我想我想要一个像ebay那样没有响应性的菜单。
.search [type=text]{
width: 30em;
position:absolute;
top:6%;
left:15%;
box-sizing: border-box;
border: 2px solid #ccc;
border
浏览 3提问于2017-02-26得票数 0
3回答
只使用CSS创建三列表？(没有表格元素)
html、css、css-tables
我正在为Django项目创建模板，我需要在HTML中创建一个三列表，只使用CSS，而不是<table>元素。
原因，除了任何意识形态上的反对桌子，是因为这份报告需要同时在桌面和手持设备，如BlackBerry。在手持设备上，与其试图在微小的屏幕上强制使用三列，不如将表拆分成一系列连续的段落。
以前，我曾使用较少的框架()黑出一个快速/脏的模板。
{% for category in article_list_categorised %}
<h2 class="first">{{ catego
浏览 0提问于2010-08-13得票数 3
回答已采纳
2回答
WordPress中与浏览器相关的奇怪的CSS列问题
html、css、wordpress、responsive
当我经常使用WordPress开发时，我不会偶然发现与浏览器相关的问题，但是我很难找到这个奇怪的原因，尽管火狐/边缘的bug很简单(在Chrome上运行良好；在其他浏览器上没有测试过)。
网址：
在主页上，我们展示了几种产品。在最后一列中，3个产品应该在同一行中对齐，第一个产品保持在右侧，其他两个产品向下移动到新行。使用Chrome/Firefox的开发人员工具检查代码，没有添加到这些产品中的不同类或样式会导致该问题。这个错误似乎只发生在更大的屏幕上，所以不是一个响应性问题。
所有产品都使用CSS中的无序列表进行左对齐，每个产品的固定宽度为300px，ul标签的固定宽度为900px。li元素没
浏览 3提问于2016-09-03得票数 1
1回答
自定义UITableViewCell根据屏幕大小调整大小
objective-c、uitableview、interface-builder、autolayout、custom-cell
我刚刚创建了一个UITableViewCell的子类，它一行包含5个标签：
它的宽度是320，这是iPhone 4S的宽度。当我在屏幕更大的设备上加载带有此单元格的表格视图时，我遇到了一个问题。在最后一个标签(图片中的“XX”)和单元格的末尾之间有一个很长的空格。
我想要实现的是在标签和第一个/最后一个标签以及单元格的开始/结束之间有相同的间距。每个标签都有不同的大小。所以基本上我可以说我想要有一个有列的规则表。
我尝试过使用自动布局，但没有成功。你有什么想法吗？
浏览 0提问于2015-03-27得票数 1
2回答
Twitter-bootstrap 3在调整窗口大小时添加了侧边栏重叠内容和页脚
html、css、twitter-bootstrap、twitter-bootstrap-3、affix
当我在bootstrap 3中使用affix并调整窗口大小时，我遇到了一个重叠的侧边栏问题。有没有办法添加一些css类，这样菜单就不会与列重叠，而是附加到顶部？
此外，该列与页脚重叠。任何帮助都将不胜感激。似乎很多人都有同样的问题。
下面是HTML：
<div class="container">
<div class="row">
<div class="col-md-4 column">
<ul id="sidebar" class="n
浏览 0提问于2014-01-10得票数 5
回答已采纳
1回答
使用Bootstrap创建居中表格
html、css、twitter-bootstrap
我有20个图标，我想从他们做一个居中的图像水平线。但我不能使用HTML表格，因为我希望它是响应性的。它应该是为移动用户包装的。通过使用HTML表，我想我应该使用1行和20列，但它不会对小屏幕进行换行。
我创建了一组这样的div。这方面的视图是OK的。
<div style="display: inline-block; border: solid 1px black;">
<a href="http://www.example.com" target="_blank" >
<img src=&
浏览 4提问于2013-04-27得票数 0
2回答
Bootstrap 3.x nav-tabs的响应问题
css、twitter-bootstrap、responsive-design、twitter-bootstrap-3、frontend
我有一个引导组件nav-tabs，当页面宽度大于行所需的宽度时，它可以正常工作(bootstrap .row div)。问题是，当我更改移动设备的视图时，响应式设计的行为并不像它应该的那样，选项卡也没有对齐。请参阅以下链接中的代码，页面宽度减小的程度、公司、支持和设计选项卡的行为异常。
浏览 2提问于2014-09-13得票数 3
1回答
WPF布局问题
c#、wpf
我不知道我做错了什么，我有一个2列3行的网格。在左列中，我有一个文本块和文本框，还有一个列表框，这一切都很好。
右边的列变得有点复杂，因为我要开始一个tabcontrol。然后我的TabItem和里面我有我的主网格，然后在里面我有2个网格。分别是grdDetailsTop和grdDetailsBottom。
grdDetailsTop有3列，左边是带有边框的图像，中间应该是成员代码：'TextBox‘，下面应该是家庭代码：'TextBox’，最后是平衡：'TextBox‘。
我尝试的方式是，我有一个有3列的grdDetailsTop网格，在第一列中我放置了一个分组框，里
浏览 0提问于2013-03-03得票数 1
回答已采纳
2回答
以引导为中心的响应式垂直导航栏
html、css、twitter-bootstrap
在实现我的响应式引导导航栏时遇到了一些问题。
我对bootstrap/css和jsfiddle 还是个新手。
<div class="navbar">
<div class="navbar-inner"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
浏览 0提问于2013-05-07得票数 1
回答已采纳
3回答
响应灵敏的中型屏幕(平板电脑)的引导问题
html、css、twitter-bootstrap、responsive-design
我正在尝试实现一个bootstrap 3响应式设计，但由于某些原因，当显示在中等大小的屏幕上时，导航栏的视图会中断。
这是3个视窗，分别是:移动，平板和屏幕。
平板电脑坏了，手机/屏幕都没问题。我尝试了很多东西，但到目前为止什么也没弄明白。
正如你所看到的，这是一个中断(2行，而不是显示三条线图标。
这一台很好(PC)
谢谢!
浏览 2提问于2014-12-20得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
