html - 如何使用不同的方式使 Bootstrap 按钮的高度相同？

<分区>

我使用的是 Bootstrap 版本 3.3.7 如何使 Bootstrap 按钮与按钮在底部的列高度相等？我发现一些解决方案针对 row 或 col 类以使其高度相同。但是我可以在不定位 Bootstrap row 和 col 的情况下得到相同的结果吗？除了以行和列类为目标或使用 position:absolute 之外，我可以使用其他一些 CSS 方式获得相同的结果吗？也许 clearfix？清楚:两者？溢出？显示:表格单元格？还是显示:flex？

/* Can I do the same result without using position:absolute? */
@media only screen and (min-width: 990px) {
button.btn.btn-success {
	position: absolute;
	top: 100px;
	left: 15px;
	margin: 20px 0;
}
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript" ></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript" ></script>

<div class="container">
	<div class="row">
		<div class="col-md-4">
			<p>expetendis illum vidisse laboris officia sint philosophari ab laboris nescius</p>
			<div class="clearfix">
				<button class="btn btn-success">Button</button>
			</div>
		</div>

		<div class="col-md-4">
			<p>ea pariatur laborum nulla quae sunt mandaremus laborum et pariatur legam velit adipisicing amet o admodum magna nescius noster noster</p>
			<div class="clearfix">
				<button class="btn btn-success">Button</button>
			</div>
		</div>

		<div class="col-md-4">
			<p>pariatur non varias ex ea sunt voluptatibus ingeniis summis doctrina transferrem incurreret nostrud officia proident magna do qui distinguantur fidelissimae familiaritatem lorem elit nescius enim litteris litteris iis enim cohaerescant</p>
			<div class="clearfix">
				<button class="btn btn-success">Button</button>
			</div>
		</div>
	</div>
</div>

<h3>despicationes quorum quamquam aliquip coniunctione distinguantur de imitarentur 
cohaerescant e incurreret hic officia noster cupidatat arbitrantur praesentibus 
praetermissum illustriora exquisitaque ea cillum incurreret tempor vidisse minim 
e a nisi mandaremus</h3>

最佳答案

你可以试试Flexbox。使用您的自定义类，即 flex 并将 flex 应用于 .row 和 .col-* 类

或者您可以升级到 bootstrap4，因为它完全基于 Flexbox，并且很容易将这些类型的布局与其 flex-utilities 类对齐。

.flex {
  display: flex;
}

.flex .col-xs-4 {
  display: flex;
  flex-direction: column;
}

.flex .col-xs-4 p {
  flex: 1;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript"></script>

<div class="container">
  <div class="row flex">
    <div class="col-xs-4">
      <p>expetendis illum vidisse laboris officia sint philosophari ab laboris nescius</p>
      <div class="clearfix">
        <button class="btn btn-success">Button</button>
      </div>
    </div>

    <div class="col-xs-4">
      <p>ea pariatur laborum nulla quae sunt mandaremus laborum et pariatur legam velit adipisicing amet o admodum magna nescius noster noster</p>
      <div class="clearfix">
        <button class="btn btn-success">Button</button>
      </div>
    </div>

    <div class="col-xs-4">
      <p>pariatur non varias ex ea sunt voluptatibus ingeniis summis doctrina transferrem incurreret nostrud officia proident magna do qui distinguantur fidelissimae familiaritatem lorem elit nescius enim litteris litteris iis enim cohaerescant</p>
      <div class="clearfix">
        <button class="btn btn-success">Button</button>
      </div>
    </div>
  </div>
</div>

关于html - 如何使用不同的方式使 Bootstrap 按钮的高度相同？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50500843/

上一篇：javascript - 像 Angular5 中的 DOM 选择的 Jquery

下一篇：javascript - 将 innerhtml 拆分为文本以在 javascript 中翻译 JSON

相关文章：

带有边框半径和背景渐变的 HTML 进度条

javascript - 100% 高度输入字段并垂直对齐文本

jquery - 这可能是 Bootstrap 轮播缩略图在桌面上显示 4 列，在移动设备上显示 2 列吗？

javascript - 未定义结果 JavaScript

javascript - 使用 jQuery Mobile 时如何操作 DOM？

javascript - 登录表单，Ajax调用PHP函数

html - :target pseudo class doesn't find target

html - Table Bootstrap 显示不佳 - HTML 和 CSS

javascript - 使用 jQuery CSS 属性设置背景图像

javascript - 防止 Bootstrap 模式窗口在表单提交时关闭