html - 将容器设置为 50% 宽度

Question

我喜欢这个例子中的 Masonry 风格效果。

代码笔: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>

Answer 1

当然有。

但是，我必须概述像这样重写 .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>

如果不是，您很可能需要阐明您想要实现的目标。