相关疑难解决方法(0)
Bootstrap 3:分割四个相等的页面
我试图将我的单页网站的一部分(使用Bootstrap 3)分成4个相等的部分,但我无法让它工作.
我想我可以为每个col-md-6添加额外的类,但问题实际上是高度与内容对齐,我不能使用固定的高度,因为它应该响应...
<section>
...
</section>
<section id="theproject" class="project">
<div class="container" >
<div class="row">
<div class="col-md-6">
</div>
TOPLEFT
<div class="col-md-6">
TOPRIGHT
</div>
</div>
<div class="row">
<div class="col-md-6">
BOTTOMLEFT
</div>
<div class="col-md-6">
BOTTOMRIGHT
</div>
</div>
</div>
</section>我的custom.css看起来像这样:
.project {
height: auto !important;
min-height: 100%;
overflow: hidden;
background: white;
font-family: 'Open Sans', sans-serif;
font-style: normal;
font-size: 16px;
}谢谢你的帮助!
推荐指数
解决办法
查看次数
如何在Bootstrap列中使元素与底部对齐？
我需要将一个框对齐到引导列的左下方。谢谢你的帮助。
问题在于该列没有定义的高度。
推荐指数
解决办法
查看次数
如何让 Bootstrap Flex 子元素具有相同的高度？
我的理解是新的 Boostrap (v4) 使用 flex 在盒子上显示元素，并且对齐更加灵活。在我的页面中，我有三个具有相同高度的框，但是白色的内部元素也需要具有相同的高度。
我怎样才能实现这个目标？将 设为.tile会使height:100%框呈现太长。
编辑：我想澄清这并不是使以红色标记的列等高，这已经使用标准 Bootstrap 类实现了。我需要的是全高的白色盒子。
.col-md-4 {
border: 1px solid red;
}
.tile {
background: #fff;
}
body {
background: grey
}
.img-fluid {
width: 100%;
}
.padding {
padding: 0 10px;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row row-eq-height three-sections">
<div class="col-md-4 align-self-stretch tile-outer">
<div class="tile">
<a href="#" target="_blank"><img src="https://via.placeholder.com/300x300" alt="" class="img-fluid" /></a>
<div class="padding">
<h3>Text block 1</h3>
<p>Lorem ipsum dolor sit amet, minim molestie argumentum …推荐指数
解决办法
查看次数
具有相同高度和垂直居中文本的 Bootstrap 按钮
我有 3 个并排的 Bootstrap 按钮，但其中一个有换行符（我正在用 修改它们white-space: normal）。我需要它们都具有相同的高度和垂直居中的文本。
我有这样的：
我需要他们这样：
我无法弄清楚如何做到这一点。有任何想法吗？
推荐指数
解决办法
查看次数
Bootstrap中响应网格的正方形
我想创建一个响应式图像网格,它总是在Bootstrap中平方.
到目前为止,我得到了这个:Jsfiddle Link
这部分强制元素始终被平方:
.frontpage_square {
position:relative;
overflow:hidden;
padding-bottom:100%;
}
.frontpage_square img {
position:absolute;
}
左边较大的方块和右边的九个小方块是正确的,但我无法弄清楚如何在整个高度上展开右边的九个方块.所以基本上他们应该采取左,更大的正方形的整个高度.
推荐指数
解决办法
查看次数
Bootstrap 3网格列的高度相同
是)我有的
我有一些不同高度的Bootstrap 3 Grid列:
<div class="row">
<div class="col-xs-4">Item 1</div>
<div class="col-xs-4">Item 2 <br/> additional line
</div>
<div class="col-xs-4">Item 3</div>
<div class="col-xs-6">Item 4 - This should be on a separate line</div>
</div>
看起来像这样:
我想要的是
我想添加一个额外的类(例如.row-aligned).row来实现所有并列"cols"具有相同的高度.
这应该是这样的:
我的尝试
因为我不需要支持旧浏览器,所以我可以使用flexbox.我的尝试很安静,适用于所有浏览器,但不适用于Safari(版本9.1,Mac OSX 10.10):
.aligned-row {
display: flex;
flex-flow: row wrap;
}
Safari Bug
正如我所说,Safari无法处理这种flexbox样式,结果如下所示:
(我发现添加margin-left: -1px似乎解决了这个问题,但它不是一个好的解决方案,因为它会将所有内容移动1个像素,这可以隐藏边框或其他东西.)
我的问题
你知道如何在Safari中修复这个bug吗？或者我使用flexbox错误？或者没有使用flexbox有更好的解决方案吗？
推荐指数
解决办法
查看次数
将 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 行，以使它们完全填充父高度？
先感谢您
推荐指数
解决办法
查看次数
使用引导程序 3 的行中所有列的固定列高相同
我的代码笔：http ://codepen.io/helloworld/pen/razoxg?editors=110
我有 3 行，每 3 列。
我怎样才能给每一行或所有 3 列相同的固定高度，这样一个瓷砖不大于另一个？
<div class="container-fluid">
<!-- Page Header -->
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Electronics
</h1>
</div>
</div>
<!-- /.row -->
<!-- 1st Row -->
<div class="row">
<div class="col-xs-4">
<div class="panel industry-tile-medium">
<div class="panel-body">
<header>Customer</header>
</div>
<div class="panel-footer">
<div class="row">
<div class="col-xs-6">
<img class="img-responsive" src="http://s16.postimg.org/tqs90puwl/customer.png"></img>
</div>
<div class="col-xs-6 col-bottom">
<ul class="list-group">
<li class="list-group-item ">Intel</li>
<li class="list-group-item ">Micron</li>
<li class="list-group-item ">Infineon</li>
<li class="list-group-item ">First Solar</li>
</ul>
</div>
</div>
</div>
</div>
<!-- /.panel --> …推荐指数
解决办法
查看次数
在div中创建一个像背景图像封面的图像
尝试在div中自动裁剪内嵌图像以模拟背景图像.我尝试使用大小超过100%的绝对位置,但是当你调整大小时,它适用于高度一次然后打破另一个宽度.我假设方形没有任何帮助.您对如何解决此结果有任何建议吗？
JavaScript是使这项工作的最佳方式吗？
body {
background: #000;
}
.container {
background: #ccc;
}
.row {
border: 1px solid #fff;
}
.col-md-6 {
border: 1px solid red;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-md-6">
<img src="http://dummyimage.com/600x500/500/fff" class="img-responsive" />
</div>
<!-- /.col-md-6 -->
<div class="col-md-6">
<h2>Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis officia animi consectetur obcaecati cum harum aliquam qui nisi aliquid sint. Nobis voluptas sequi voluptatem soluta ex sed nisi, sapiente dicta!</p>
</div>
<!-- /.col-md-6 …推荐指数
解决办法
查看次数
为什么我的bootstrap 4列不是同一个高度？
我只是在学习bootstrap 4.这些列应该是相同的高度,但是没有用.码:
<div class="row">
<div class="col-xs-8 col-sm-8 col-md-8 col-lg-8 col-xl-8">
<div class="projectDescBox">
<h5>Project</h5>
<p>Stuff here</p>
</div>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
<div class="projectDescBox">
<h5>heading</h5>
<p>a lot longer stuff here. This box should be a lot longer.a lot longer stuff here. This box should be a lot longer.a lot longer stuff here. This box should be a lot longer.</p>
</div>
</div>
(它在一个类容器中进一步向上).根据文档,它应该自动高度相同.但是,这是我的输出: 截图
我错过了什么？谢谢!
推荐指数
解决办法
查看次数