- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
Boostrap 3 附带:
@media (min-width: 1200px)
.container {
width: 1170px;
}
@media (min-width: 992px)
.container {
width: 970px;
}
@media (min-width: 768px)
.container {
width: 750px;
}
我可以随意添加更多最小宽度的案例吗?我应该考虑什么?
我希望在 1200px 和 1920px 之间有更多的情况...因为在 1920px 中我最终得到一个 1170px 的容器,这很糟糕,因为它可能是 1300px
最佳答案
事情没有那么简单。 Bootstrap 3 带有 4 个类:
并且容器类链接到这个类,所以如果你想在这个宽度之间有其他的stepps,你必须从添加一个新类开始,例如:xxs(超小)0-384(女巫没有在现在启动),你必须添加这个类:
.col-xxs-1, .col-xxs-2, .col-xxs-3, .col-xxs-4,
.col-xxs-5, .col-xxs-6, .col-xxs-7, .col-xxs-8,
.col-xxs-9, .col-xxs-10, .col-xxs-11, .col-xxs-12 {
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
position: relative;
}
@media (max-width: 384px) {
.col-xxs-1,
.col-xxs-2,
.col-xxs-3,
.col-xxs-4,
.col-xxs-5,
.col-xxs-6,
.col-xxs-7,
.col-xxs-8,
.col-xxs-9,
.col-xxs-10,
.col-xxs-11 {
float: left;
}
.col-xxs-1 {
width: 8.333333333333332%;
}
.col-xxs-2 {
width: 16.666666666666664%;
}
.col-xxs-3 {
width: 25%;
}
.col-xxs-4 {
width: 33.33333333333333%;
}
.col-xxs-5 {
width: 41.66666666666667%;
}
.col-xxs-6 {
width: 50%;
}
.col-xxs-7 {
width: 58.333333333333336%;
}
.col-xxs-8 {
width: 66.66666666666666%;
}
.col-xxs-9 {
width: 75%;
}
.col-xxs-10 {
width: 83.33333333333334%;
}
.col-xxs-11 {
width: 91.66666666666666%;
}
.col-xxs-12 {
width: 100%;
}
.col-xxs-push-1 {
left: 8.333333333333332%;
}
.col-xxs-push-2 {
left: 16.666666666666664%;
}
.col-xxs-push-3 {
left: 25%;
}
.col-xss-push-4 {
left: 33.33333333333333%;
}
.col-xxs-push-5 {
left: 41.66666666666667%;
}
.col-xxs-push-6 {
left: 50%;
}
.col-xxs-push-7 {
left: 58.333333333333336%;
}
.col-xxs-push-8 {
left: 66.66666666666666%;
}
.col-xxs-push-9 {
left: 75%;
}
.col-xxs-push-10 {
left: 83.33333333333334%;
}
.col-xxs-push-11 {
left: 91.66666666666666%;
}
.col-xxs-pull-1 {
right: 8.333333333333332%;
}
.col-xxs-pull-2 {
right: 16.666666666666664%;
}
.col-xxs-pull-3 {
right: 25%;
}
.col-xxs-pull-4 {
right: 33.33333333333333%;
}
.col-xxs-pull-5 {
right: 41.66666666666667%;
}
.col-xxs-pull-6 {
right: 50%;
}
.col-xxs-pull-7 {
right: 58.333333333333336%;
}
.col-xxs-pull-8 {
right: 66.66666666666666%;
}
.col-xxs-pull-9 {
right: 75%;
}
.col-xxs-pull-10 {
right: 83.33333333333334%;
}
.col-xxs-pull-11 {
right: 91.66666666666666%;
}
.col-xxs-offset-1 {
margin-left: 8.333333333333332%;
}
.col-xxs-offset-2 {
margin-left: 16.666666666666664%;
}
.col-xxs-offset-3 {
margin-left: 25%;
}
.col-xxs-offset-4 {
margin-left: 33.33333333333333%;
}
.col-xxs-offset-5 {
margin-left: 41.66666666666667%;
}
.col-xxs-offset-6 {
margin-left: 50%;
}
.col-xxs-offset-7 {
margin-left: 58.333333333333336%;
}
.col-xxs-offset-8 {
margin-left: 66.66666666666666%;
}
.col-xxs-offset-9 {
margin-left: 75%;
}
.col-xxs-offset-10 {
margin-left: 83.33333333333334%;
}
.col-xxs-offset-11 {
margin-left: 91.66666666666666%;
}
}
还有你写的容器类:
@media (min-width: 384px)
.container {
width: 372px;
}
如你所见,它非常复杂,如果你非常非常想自定义它,建议不要使用 Bootstrap 。
关于css - 我可以为 Bootstrap 3 创建更多 "media min-width"案例吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26090786/
我想了解这两者的区别 谢谢 最大宽度:100px 宽度:100px body{ max-width: 1080px; width: 1080px; backgrou
jQuery 的 .width()、jQuery 的 .css('width') 和 .style 返回的值有什么区别.width 节点上的属性? 我很好奇,因为在尝试将两个表格单元格的宽度设置为相等
我可以在 wordpress 的 header php 中添加两个视口(viewport): 和 我希望能够使用 viewport width 1024 显示everything,除非您是低于 x
好的,所以我得到了 ImageBackground 的以下组件(使用 typescript ,但应该是不言自明的)。 (这是 react 原生的) import * as React from "re
我正在尝试根据 div 中包含的图像的宽度调整其大小,但没有任何 JS 方法可以一致地工作来获取图像的宽度。 label here img { width: auto
我有一个表,我试图找到表中每个 td 的宽度。我尝试了各种变体:$("td")[0].width(),但它们都不起作用,收到错误:"Uncaught TypeError: $ (...)[0].wid
我在使 rem 中的 min-width 与百分比宽度共存时遇到了一些问题。 When resizing this jsfiddle the outer right block is going un
当我在 chrome(以及 Edge/Brave/Opera)的设备模式下测试页面时,设备宽度属性似乎减少了,但宽度属性没有 重新创建: html {
我想依次显示 div #botone、#bottwo 和 #bottree。我还希望在 #botone div 上按 100% 宽度和比例高度调整背景图像。 现在最后两个 Div 显示在 #boton
我是第一次学习 JavaScript 的学生,我有一个学校问题,我们需要指出 width 和 style.width 接受的数据类型。 我知道数据类型有数字、字符串、空值、未定义、 bool 值和对象
所以看起来在移动设备中媒体查询使用 screen.width 根本没有改变。但是在我的桌面上,当我更改窗口大小时,screen.width 保持不变,$(window).width() 发生变化,并且
http://jsfiddle.net/3BFGU/27/ 有谁知道为什么包含文本“ABC”的跨度的宽度返回 0。 1) 仅在 Firefox 中发生。2)如果我删除两者之间的跨度,它工作正常。 (h
我知道下面的代码清除了 Canvas canvas.width = canvas.width 但这在内部是如何工作的呢? 赋值运算符只是将一些值赋给变量,但是上面的代码如何清除 Canvas ? 根据
当使用 max-width 时,为什么它不会“破坏”超过允许长度的单词,我该如何让它工作? JSFiddle function input() { var inputText = document
在移动网站上,在利用 width=device-width 视口(viewport)设置的同时调整文本大小的最佳方式是什么? 最佳答案 样式百分比如何?比如 100% 或 90%。 关于html -
对于我的 WPF Toolkit DataGrid,我使用以下自定义列标题样式:
过去,我看到下一个 css,我在想两者之间是否存在一些实际差异 min-width: 90px; max-width: 90px; 和 width: 90px; 最佳答案 使用 width 将简单地在
我有一个 R Markdown,我从 RStudio 中将其编织为 html。我可以使用 fig.width 和 fig.height 来调整我的绘图的分辨率,但我似乎无法加宽页面输出,以便文本输出不
此处的示例代码:http://pastebin.com/95z3pftQ 我正在尝试构建一个带有固定标题和“内容”部分的移动页面,该部分将填充外部(经过清理,但在其他方面是任意的)HTML。我需要使用
这里是 dp 单位的定义:(如果它是正确的...) 密度无关像素 - 一种基于屏幕物理密度的抽象单位。这些单位是相对于 160 dpi 屏幕而言的,因此 1 dp 是 160 dpi 屏幕上的一个像素
我是一名优秀的程序员,十分优秀!