相关疑难解决方法(0)
将 bootstrap 列拆分为高度相等的 n 行，填充父级高度
我对 Bootstrap 很陌生，我grid在尝试重现以下模板时遇到了系统问题：
在这个例子中，我有 3 列：
- 第一列包含一些信息/图片。该列包含大量数据。
- 第二列包含 3 个（但可能是 n 个）联系信息（电子邮件、地址、电话号码等）
- 第三列包含一些随机信息
我想将第二列分成 3 行，高度相等。我需要做的是将这 3 行垂直居中在第二列，并可能扩展它们的高度以填充父（第二列）高度。
这是我迄今为止取得的成就的一个例子：
<div class="row container">
<div class="col-md-4 first">
<p> ... VERY LONG CONTENT ... </p></div>
<div class="col-md-4 second">
<div class="row">
Telephone number
</div>
<div class="row">
Address
</div>
<div class="row">
email
</div>
</div>
<div class="col-md-4 third">
Something else, vertically centered
</div>
</div>
在这里找到一个带有我的代码的引导
作为替代方案，我也很乐意使用<ul>.
我怎样才能做到这一点？是否有任何引导类可以应用于所有 3 行，以使它们完全填充父高度？
先感谢您
推荐指数
解决办法
查看次数
如何使bootstrap列连续高度相同？
http://www.bootply.com/somVIZEXxC#这是我的网站的bootply,基本上我希望cols col-lg-6的高度相同,以便我在其中的图像是均匀的,此刻,一个图像在另一个图像下方延伸.
推荐指数
解决办法
查看次数
Bootstrap 3个相同高度的缩略图(就像bootstrap 4中的高度相同的卡片)
我有一排像这样的缩略图:
我希望他们的身高相等.这是我的代码:
<div class="row text-center">
<div class="col-md-3 col-sm-6">
<div class="thumbnail">
<div class="caption">
<h3>HOTKEY + COMBO</h3>
<p>Hotkey description goes here. Category only shown in explore.</p>
<p>
<a href="#" class="btn btn-default" data-tooltip="Change Hotkey">
</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="thumbnail">
<div class="caption">
<h3>HOTKEY + COMBO</h3>
<p>short desc</p>
<p>
<a href="#" class="btn btn-default" data-tooltip="Change Hotkey">
</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 hotkey-add">
<div class="thumbnail">
<div class="caption">
<p></p>
<p><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-plus"></span></a></p>
</div>
</div>
</div>
</div>
这可能吗？就像我们在bootstrap4中看到的,这里是相同的高度卡:
http://www.codeply.com/render/KrUO8QpyXP#
推荐指数
解决办法
查看次数
在 Bootstrap 4.1 中将 col 文本与背景颜色垂直居中对齐
这是实际工作的代码在中间对齐文本：
<div class="container section-content">
<div class="row" style="border-radius: 4px; border: solid 1px #979797;">
<div class="col-md-3 align-self-center" style="background-color: #4a90e2">
Align
</div>
</div>
</div>
但这是输出：
所需的输出应该用背景颜色填充整个左列。
我如何实现这一目标？
编辑：不是如何使 Bootstrap 列的高度相同？ 这是垂直对齐的问题
推荐指数
解决办法
查看次数
Bootstrap:如何制作相同高度的左右容器？
码:
#left {
background-color: rgba(255,0,0,0.3);
}
#right {
background-color: rgba(0,255,0,0.3);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="col-xs-3" id="left">
<p>short</p>
</div>
<div class="col-xs-3" id="right">
<p>long</p><p>long</p><p>long</p><p>long</p><p>long</p>
</div>
</body>如您所见,左侧容器和右侧容器的高度不同.有人可以给我一些关于制作相同高度的建议吗？
推荐指数
解决办法
查看次数
Twitter引导响应块高度
在我的Twitter Bootstrap 3.2应用程序中,我有div块具有重叠宽度.
但是如果我删除"行"类,由于内容长度的变化,块高度会变得不同,所以块看起来很奇怪.检查此宽度是否大于992px的屏幕:http://jsfiddle.net/mavent/bFcrq/13/
如果我使用"行"类,我的页面看起来很好:http://jsfiddle.net/mavent/bFcrq/15/ 但我不知道何时使用行类.因为屏幕大小不同,所以我不知道我是否可以使用每2个div或3个div的行类.
所以我的问题是,如何使这个块具有相同的高度,所以即使小而大的屏幕也有漂亮的外观？
<div class="text-center"> <div class="visible-xs visible-sm">Small screen is ok, There is problem for big screens </div> <div class="well col-lg-4 col-md-4 col-sm-12 col-xs-12"> <a href=""><h2>My pretty title 1</h2><p>My subtitle which can have different number of words</p></a> </div>
编辑:还要在大屏幕上检查这个行为:http://jsfiddle.net/bFcrq/26/
即使我使用"行"类,有些块很长,有些很短.
当我使用"alert-*"类时,它看起来非常糟糕.
Edit2:虽然我更喜欢CSS解决方案,但基于JQuery的解决方案也适合我.
推荐指数
解决办法
查看次数
Bootstrap列全内容背景颜色
这就是我想要做的:
这就是我所拥有的:
这是我的代码:
HTML
<div class="row">
<div class="col-md-4">col-md-4</div>
<div class="col-md-6">col-md-6 ...</div>
<div class="col-md-2">col-md-2</div>
</div>
CSS
.col-md-4,.col-md-2 {
background-color: #e3e3e3;
}
.col-md-6 {
background-color: #f5f3f3;
}
我检查了有关该主题的其他问题,但我对答案不满意...有人可以帮助我改进我的代码吗？谢谢 !
推荐指数
解决办法
查看次数
CSS:强制列始终具有完整高度
我有以下html:
<div style="height: 80px">
...
</div>
<div class="container-fluid">
<div class="row">
<div class="col-xs-2 col1">...</div>
<div class="col-xs-10 col2">...</div>
</div>
</div>
我的col1和my col2目前都有.height: auto;然而,我col2总是比我的大col1.我不希望我col2有一个特定的身高.但是,我希望我的col1身高始终如此高,所以无论高度如何都要匹配col2.
我怎样才能在css/sass中实现这一目标？
推荐指数
解决办法
查看次数
Bootstrap缩略图大小相同
如何强制所有缩略图具有相同的高度？文本是从DB加载的,其中有一些是在一些文件中加载的,而在其他文件中则较少.结果显示在PrtScr上.我想保持他们的响应和相同的相对大小.我应该添加空白/修剪文本还是内置某种容器？我不知道这是否有意义以及如何解决这个问题
<div class="col-xs-18 col-sm-6 col-md-3">
<div class="thumbnail">
<img src="http://placehold.it/500x300" alt=""/>
<div class="caption">
<h4 th:text="${game.title}"/>
<p th:text="${game.shortDescription}"/>
<a href="#" class="btn btn-info btn-xs" role="button">Details</a>
<a href="#" class="btn btn-default btn-xs" role="button">Info</a>
</div>
</div>
</div>
我从这里得到这个代码:
http://bootsnipp.com/snippets/featured/thumbnail-with-caption-amp-buttons
推荐指数
解决办法
查看次数
Bootstrap 4 将 div 与具有不同高度的列中的另一个 div 的底部对齐
请参阅代码片段：无论前一个 div 的高度如何，我都试图将 div 与列底部的“了解更多”以相同的垂直高度对齐。
重复免责声明：我一直在研究如何使 Bootstrap 列的高度都相同？以及如何使 Bootstrap 4 列的高度都相同？这似乎是一个类似的问题。但是，这些解决方案对我不起作用，因为它们主要用于 BS3（例如，我尝试了 class="row-eq-height" 的示例），并且大多数关于 BS4 的答案都暗示 BS4 中的等高是默认值。
但是，正如您从红色边框中看到的那样，默认情况下只有外列高度“拉伸”到底部，内列高度仅等于文本高度。我很困惑。
* { border: 1px solid red !important; }
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>
<body>
<div class="row text-center no-gutters">
<div class="col-sm-4">
<div>
<h4>Components and examples</h4>
<p class="body-block-3 mx-auto">multiple line text example random text should break across multiple lines</p>
</div>
<div class="align-items-end">
<a href="">Learn more 1</a>
</div>
</div>
<div class="col-sm-4">
<div>
<h4>Components and examples</h4>
<p class="body-block-3 mx-auto">one …推荐指数
解决办法
查看次数
想要使用Bootstrap将一整页拆分为四个相同大小的div
我在使用高度时会感到困惑:100%,内容设置为25%25%25%25%为什么它不起作用(在我的浏览器中,每个div看起来都很小,100%没有填满整页).谁能在这里找到我的错？
我的HTML代码:
<div class="container-fluid" style="height: 100%">
<div class="row" style="height: 25%;">
<div class="col-xs-4 col-md-4" style="background-color:red;">
.col-xs-9 .col-md-7
</div>
<div class="col-xs-4 col-md-4" style="background-color:yellow;">
.col-xs-3 .col-md-5
</div>
<div class="col-xs-4 col-md-4" style="background-color:lavender;">
.col-xs-3 .col-md-5
</div>
</div>
<div class="row" style="height: 25%;">
<div class="col-xs-4 col-md-4" style="background-color:red;">
.col-xs-9 .col-md-7
</div>
<div class="col-xs-4 col-md-4" style="background-color:yellow;">
.col-xs-3 .col-md-5
</div>
<div class="col-xs-4 col-md-4" style="background-color:lavender;">
.col-xs-3 .col-md-5
</div>
</div>
<div class="row" style="height: 25%;">
<div class="col-xs-4 col-md-4" style="background-color:red;">
.col-xs-9 .col-md-7
</div>
<div class="col-xs-4 col-md-4" style="background-color:yellow;">
<h1 class="h1Title">Azkaban</h1>
</div>
<div class="col-xs-4 col-md-4" style="background-color:lavender;"> …推荐指数
解决办法
查看次数