Question

我正在使用Bootstrap版本3.3.7如何使用底部的按钮将Bootstrap按钮设置为相等的高度列？我发现某些解决方案针对的是row或col类，以使其高度相同。但是，如果不定位Bootstrap row和col，我可以做同样的结果吗？我可以使用其他CSS方式制作相同的结果，而不是使用position:absolute来定位行和col类吗？也许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>

Answer 1

您可以尝试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>

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

1 个答案: