草庐IT

$bootstrap

全部标签

html - Bootstrap 中 .row 的用途是什么?

这个问题在这里已经有了答案:Bootstraprowandcolexplanation(4个答案)关闭去年。根据Bootstrap'sdocumentationRowsmustbeplacedwithina.container(fixed-width)or.container-fluid(full-width)和Userowstocreatehorizontalgroupsofcolumns.为什么这是必要的?.row只能占据.container或.container-fluid的最大宽度考虑到你必须关闭.row似乎要写更长的时间:ColumnAColumnBColumnCColumn

html - 面板标题中的 bootstrap 3 按钮组未居中

我在面板标题中有一个按钮组。我希望它们向右浮动,但是当我这样做时,按钮现在位于标题底部,我需要它们居中。我该怎么做?这是HTML:MemberofthefollowingUnitstesttest还有一个fiddle例子:http://jsfiddle.net/snowburnt/4ejuK/奇怪的是,在我的ChromiumLinux开发环境中,按钮本身正确居中,但其中的图标低于应有的位置,我觉得这将解决这两个问题。 最佳答案 您应该将类​​pull-right添加到您的.btn-groupdiv,而不是指定float:right。

html - Bootstrap 标签环绕复选框和输入

我正在制作一个表单,其中包含一个与文本输入内联的复选框。这是我使用bootstrap使它看起来不错的方法:看起来不错,但效果不佳。在firefox中,用户不能在文本框中键入。是否有一种好的Bootstrap方法可以将复选框和文本输入相互内联? 最佳答案 不要将两个input元素放在一个label元素中。这是解决这个问题的TwitterBootstrap方法:这是DEMO.更多示例来自officialdocumentation. 关于html-Bootstrap标签环绕复选框和输入,我们在

html - Bootstrap 将复选框放入下拉列表中

我正在尝试将复选框表单放入这样的下拉列表中:DropdownFormTwoTwo这是一个DemoinBootply但是,正如您在演示中看到的那样,无论出于何种原因,实际的复选框本身都出现在下拉菜单之外。谁能告诉我是什么原因造成的,应该如何实现?如果我把标签类去掉,它就可以工作,但它都聚集在一起了。 最佳答案 这是我们要构建的:HTML本质上,我们将寻求组合两组不同的Bootstrap控件和样式:Dropdowns&Checkboxes.在每个li中,我们将使用label而不是a元素,这样我们就可以wrapthecheckboxina

html - 为什么需要在 Twitter Bootstrap 3 中使用不同的列类?

我正在学习TwitterBootstrap3中的网格,有些东西我不明白...如果这是一个愚蠢的问题,我很抱歉。我知道媒体查询每次都会使容器类的宽度不同,例如。最小宽度为768像素的视口(viewport)使容器类的宽度为750像素。....最小宽度为1200px的视口(viewport)使容器类为1170px等。但是,为什么需要为.col-md-2和.col-lg-2等列设置不同的类,因为在这两种情况下,值都是8.333333333333332%;然后.col-md-3和.col-lg-3都是25%等等750px的25%与1170px的25%的比例仍然相同

html - Bootstrap 3 右对齐按钮

我正在尝试右对齐网格中的按钮:我希望右侧的按钮与其上方的文本区域对齐。我的代码看起来像这样:PurchaseOrder我已经尝试添加偏移量并调整不同列的跨度...按钮太靠左或太靠右。我试过向右侧按钮添加固定的margin-left,这可行,但它破坏了响应式设计。注意:我不能使用pull-right,它在Bootstrap3中被弃用了。 最佳答案 通常Bootstrap有自己的类来将元素拉到右边。试试这个:Hello 关于html-Bootstrap3右对齐按钮,我们在StackOverf

html - Bootstrap,使行填充剩余的屏幕空间

我正在尝试创建一个网站,其中页眉必须具有13%的高度,并且section1必须完全填充屏幕的其余部分,并且低于section2和页脚的情况相同,因此如果用户滚动所有最后两个将适合屏幕。我已经在这上面花了很长时间了,我遇到的问题是容器没有增长到超过高度,所以section2溢出了,页脚在它上面。我正在尝试这个:Expandingtheparentcontainerwith100%heighttoaccountforfloatedcontent但无法让它工作。我的原始代码一团糟,所以我尽力清理它以专注于此。它看起来像这样:HTMLCSShtml,body{height:100%;}body

html - 为什么 Twitter Bootstrap 添加::之前和::之后?

这个问题在这里已经有了答案:Whatmethodsof‘clearfix’canIuse?(29个答案)关闭6年前。我注意到,当我检查使用Bootstrap类编写的代码时,CSS中往往有很多::after和::before属性。下面是一个示例(来自w3schools网站)。有人能从广义上解释一下这些额外属性的目的是什么,以及为什么它们似乎出现在几乎所有元素上吗?据我所知,他们正在将所有排除的元素制作成表格元素并添加一个空白的文本空间。我假设这是出于布局目的,但我很想了解更多关于这样做的原因。BootstrapExampleGridThisexampledemonstratesa50%/

html - 单击 Bootstrap 删除焦点属性

我有一个使用Bootstrap的带下拉菜单的导航栏。我在下拉列表项周围创建了一个边框,使它看起来就像一个选项卡。边界只在焦点上。用户单击选项卡将其关闭,但边框仍然显示在那里,因为它仍然处于焦点状态。点击后如何取消焦点?这是CSS#refine2.dropdown-toggle:active{background-color:transparent;border:0;}#refine2.dropdown-toggle:focus{border-top:1pxsolid#e3e3e3;border-right:1pxsolid#e3e3e3;border-left:1pxsolid#e3e

html - 可滚动div占用剩余高度(Bootstrap 4 Flexbox网格系统)

在Bootstrap4Alpha3中启用flexbox支持之前,我的代码运行良好:Workingjsfiddle但是,启用flexbox支持后,我无法使其工作。如果有办法使用Bootstrap4built-inFlexboxgridsystemfeatures,那将是最好的!Notworkingjsfiddlehtmlheadercontent:fillremainingspaceandscrollxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxfooterCSS.wrapper{height:20rem;display:flex;/*ifre