我喜欢此示例中的砌体样式效果。
代码笔：https://codepen.io/anon/pen/dZxxjm
是否可以将容器宽度设置为50％，并且仍然获得与框对齐相同的效果？
*, *:before, *:after {box-sizing: border-box !important;}
.row {
-moz-column-width: 40em;
-webkit-column-width: 40em;
-moz-column-gap: .5em;
-webkit-column-gap: .5em;
}
.panel {
display: inline-block;
margin: .5em;
padding: 0;
width:98%;
}<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<h3>Masonry CSS with Bootstrap Panels</h3>
<div class="row">
<div class="panel panel-default">
<div class="panel-heading">Title</div>
<div class="panel-body">Content here.. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
Quisque mauris augue, gravida a libero. Aenean sit amet felis
dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
Aliquam in felis sit amet augue.</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Title</div>
<div class="panel-body">Content here.. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
Quisque mauris augue orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
Aliquam in felis sit amet augue.</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Title</div>
<div class="panel-body">Content here.. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
Quisque mauris augue orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
Aliquam in felis sit amet augue.</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Panel</div>
<div class="panel-body">Content here.. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam in felis sit amet augue.</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Title</div>
<div class="panel-body">Content here.. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
Quisque mauris augue orc. Duis elementum auctor accumsan.
Aliquam in felis sit amet augue.</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Title</div>
<div class="panel-body">Content here..
Aliquam in felis sit amet augue.</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Panel</div>
<div class="panel-body">Content here.. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
Quisque imperdiet venenatis. Duis elementum auctor accumsan.
Aliquam in felis sit amet augue.</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Title</div>
<div class="panel-body">ng elit. Duis pharetra varius quam sit amet vulputate.
Quisque mauris augue orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
Aliquam in felis sit amet augue.</div>
</div>
</div>
</div>最佳答案
当然可以。
但是，我必须概述这样的重写.row和.panel类，这将大大破坏Bootstrap的布局功能。最好将自定义类（在下面使用.columns，但可以重命名）添加到此部分，以确保这些替代不会影响您网站的其余部分。无论如何，这可能是您想要的：
.columns *, .columns *:before, .columns *:after {box-sizing: border-box !important;}
.row.columns {
-moz-column-width: 2;
-webkit-column-width: 2;
-moz-column-gap: .5em;
-webkit-column-gap: .5em;
columns: 2;
padding: 0 15px;
}
.columns .panel {
display: inline-block;
margin: .5em;
padding: 0;
width: calc(100% - 15px);
}<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<h3>Masonry CSS with Bootstrap Panels</h3>
<div class="row">
<div class="col-xs-6">
<div class="row columns">
<div class="panel panel-default">
<div class="panel-heading">Title</div>
<div class="panel-body">Content here.. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
Quisque mauris augue, gravida a libero. Aenean sit amet felis
dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
Aliquam in felis sit amet augue.
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Title</div>
<div class="panel-body">Content here.. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
Quisque mauris augue orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
Aliquam in felis sit amet augue.
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Title</div>
<div class="panel-body">Content here.. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
Quisque mauris augue orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
Aliquam in felis sit amet augue.</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Panel</div>
<div class="panel-body">Content here.. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam in felis sit amet augue.</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Title</div>
<div class="panel-body">Content here.. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
Quisque mauris augue orc. Duis elementum auctor accumsan.
Aliquam in felis sit amet augue.</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Title</div>
<div class="panel-body">Content here..
Aliquam in felis sit amet augue.</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Panel</div>
<div class="panel-body">Content here.. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
Quisque imperdiet venenatis. Duis elementum auctor accumsan.
Aliquam in felis sit amet augue.</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Title</div>
<div class="panel-body">ng elit. Duis pharetra varius quam sit amet vulputate.
Quisque mauris augue orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
Aliquam in felis sit amet augue.</div>
</div>
</div>
</div></div></div>如果不是，那么您很可能需要澄清您想要实现的目标。
关于html - 将容器设置为50％的宽度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47741124/