Question

我需要在表格单元格（TD）中插入一个引导程序面板，如下所示：

<tr>
  <td>
     ......Here the panel......
  </td>
</tr>

小组可以留在其他div上（如日历约会）。为此，我用相对位置和具有绝对位置的音符声明了表格。

如果我将面板直接插入TD元素，它会起作用，如下所示： https://jsfiddle.net/0kktvptj/

但如果我将其作为row和col-sm-12插入Bootstrap网格类，则右侧的30px溢出，如下所示：http://jsfiddle.net/r0L71dbv/。

我不明白为什么会这样，我该如何解决问题。

Answer 1

我不确定我明白你想要什么。无论如何，表格都存在position:relative的问题。如果您想在td上使用它，请使用div在td内设置width: 100%;height:100%;position:relative;，然后就可以了。

这是你想要的吗？

.note {
  width: 100%;
  float: left;
}
table.table-bordered.calendario td {
  padding: 0;
  width: 33.33%;
  height: 50px;
}
table.table-bordered.calendario td .row {
  display: inline-block;
  max-height: 45px;
  width: calc(100% + 30px);
  position: relative;
}
td .row .panel {
  border-radius: 0 0 4px 4px;
}
td .row .panel-heading {
  border-radius: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<table class="table table-bordered calendario" style="margin-top: 20px;">
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td>
      <div class="row">
        <div class="col-sm-12">
          <div class="panel panel-success note">
            <div class="panel-heading">Titolo</div>
            <div class="panel-body">
Austin next level tilde, pug mlkshk actually helvetica banjo truffaut 
sartorial drinking vinegar mumblecore kogi. Franzen microdosing vegan, 
kale chips chillwave cliche beard.</div>
          </div>
        </div>
      </div>
    </td>
    <td></td>
  </tr>
</table>

Answer 2

行应始终是容器或列的子级。 Bootstrap团队在文档中明确说明了这一点。定义布局结构，然后放入内容。

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-12">
      <table class="table table-bordered calendario" style="margin-top: 20px;">
        <tr>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td>

            <div class="panel panel-success note " style="height: 50px; overflow: scroll; overflow-x: hidden;">
              <div class="panel-heading">Titolo</div>
              <div class="panel-body" style="overflow: hidden">Corpo del testo</div>
            </div>
          </td>
          <td></td>
        </tr>
      </table>
    </div>
  </div>
</div>

<强> Demo

Answer 3

我已应用此解决方案：https://jsfiddle.net/rr6ju1no/1/

＆＃13;

table.table-bordered.calendario td
{
	padding: 0;
	height: 50px;
	position: relative;
}

table.table-bordered.calendario td .row
{
	width: 100%;
}

table.table-bordered.calendario td .panel
{
	overflow: scroll;
	overflow-x: hidden;
	border-radius: 0 0 4px 4px;
}

td .row .panel-heading {
  border-radius: 1px;
}

.note
{
	position:absolute;
	width:100%;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-bordered calendario" style="margin-top: 20px;">
  <tr><td></td><td></td><td></td></tr>
  <tr>
    <td></td>
    <td>
      <div class="row">
	    <div class="col-sm-12">
          <div class="panel panel-success note " style="height: 50px;">
		    <div class="panel-heading">Titolo</div>
			<div class="panel-body">Corpo del testo</div>
		  </div>
        </div>
      </div>
    </td>
	<td></td>
  </tr>
</table>

＆＃13;

当您调整浏览器大小时，列会更好地保持相同的宽度。

Bootstrap行进入td溢出

3 个答案: