Question

这是我的研究案例： http://codepen.io/darkiron/pen/ZORNEp

我无法在我的例子中制作边框。在这种情况下，我怎么能这样做？

.col-md-4{
border: 1px solid aqua;
/*margin: -1px;*/

}

Answer 1

html,body{
  background-color: #333;
}
.panel {
  margin:auto;
}

.panel-body {
  border-collapse: collapse;
  table-layout: fixed;
  text-align: center;
  display: table;
  width: 100%;
  padding: 0;
}
.panel-body .col {
  border: 1px solid aqua;
  display: table-cell;
  width: inherit;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="col-md-9">
    <div class="panel panel-default ">
      <div class="panel-heading">test</div>
      <div class="panel-body">
        <div class="col">
          content 1
        </div>
        <div class="col">
          content 2
        </div>
        <div class="col">
          content 3
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

易

.panel-body div:not(:last-child){
    border-right: none;
}

Answer 3

border-collapse属性适用于table元素，因此，如果您不使用表格，则可以使元素的行为类似于table到display: table或display: inline-table。

您可以添加display: table; display:table-row; display:table-cell;和border-collapse: collapse;

＆＃13;

html,body{
	background-color: #333;
}
.panel{
	margin:auto;
    display:table-row;

}
.container{
  display: table;
  border-collapse: collapse;
  }
.panel-body{
	padding:0px;
}

.col-md-4{
 
    display: table-cell;
	border: 1px solid aqua;
  
	/*margin: -1px;*/
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="col-md-9">
		<div class="panel panel-default ">
			<div class="panel-heading">test</div>
			<div class="panel-body">
				<div class="col-md-4">
					content 1
				</div>
				<div class="col-md-4">
					content 2
				</div>
				<div class="col-md-4">
					content 3
				</div>
			</div>
		</div>
	</div>
</div>

＆＃13;

Answer 4

这个解决方案都不起作用！所有边界都需要collasping（也是面板）

@Andrey Fedorov我不能有更多的div。

我发现它的最佳方式为负margin！ http://codepen.io/darkiron/pen/ZORNEp

collaspe如何与div接壤

4 个答案: