将容器设置为50％宽度

时间：2017-12-10 16:50:40

标签： html css twitter-bootstrap

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

CodePen：https://codepen.io/anon/pen/dZxxjm

是否可以将容器宽度设置为50％并仍然获得相同的框对齐效果？

＆＃13;
＆＃13; 
*, *: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%;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

当然有。

但是，我必须概述重写.row和.panel这样的类将会破坏Bootstrap的布局功能。您最好将自定义类（使用下面的.columns但可以随意重命名）添加到此部分，确保这些替换不会影响您网站的其余部分。无论如何，这里有你想要的东西：

＆＃13;
＆＃13; 
.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);
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

如果不是，你很可能需要澄清你想要达到的目标。

答案 1 :(得分：0)

你是说这样的意思吗？ enter image description here

如果这是你想要的，只需添加 宽度：50％; 行类（见图）。

如果这不是您想要的，请详细说明。

相关问题
最新问题