Question

我正在为我的公司使用遗留引导工具。我遇到的一个问题是在旧版本中使用bootstrap 3中的面板。

虽然这在一定程度上起作用，但是有一些跨度问题即将出现。

我有一个带有面板的容器，该面板位于span12（页面的全长）内。在面板中，我正在尝试添加另一个全宽度的面板。通常情况下，我会说，span12并将它调整到必要但在这种情况下，它会导致它挂起。

以下是正在使用的HTML示例：

<div id="main" class="container">
   <div class="panel panel-primary custom-panel">
      <div class="panel-heading ph"> <span class="panel-title"><i class="icon-bullhorn"></i>&nbsp;&nbsp;Request Communication</span><button name="addComment" commenttype="request" type="button" class="btn btn-mini pull-right"><i class="icon-plus"></i>&nbsp;&nbsp;Add Comment</button></div>
      <div class="panel-body well">
         <div id="requestComments" class="tab-pane active">
            <span name="messages">
               <div name="parent_32" class="row parentMessage">
                  <div class="span12">
                     <div class="panel panel-default">
                        <div class="panel-heading">
                           <small><a target="_BLANK" href="#">Name</a> <span class="text-muted">commented <a title="Timestamp: 2015-08-24 11:20 UTC" data-toggle="tooltip" class="deco-none">2 days ago</a></span></small>
                           <div class="btn-group pull-right">
                              <button aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" class="btn btn-default btn-mini dropdown-toggle" type="button"><i class="icon-cog"></i></button>
                              <ul class="dropdown-menu">
                                 <li><a messageid="32" name="deleteParent"><i class="icon-trash"></i>&nbsp;&nbsp;Delete Message</a></li>
                              </ul>
                           </div>
                        </div>
                        <div class="panel-body"><small>dgdfgdfg</small></div>
                     </div>
                  </div>
               </div>
            </span>
         </div>
      </div>
   </div>
</div>

小提琴：http://jsfiddle.net/j2j6gnb1/

如何制作内部面板，其父级的整个宽度（左侧具有相同的填充）？

Answer 1

删除元素.parentMessage和.span上设置的边距，并在width: 100%元素上设置.span12。

.parentMessage {
    margin: 0;
}

.span12 {
    width: 100%;
    margin: 0;
}

Fiddle

传统Bootstrap跨度问题

1 个答案: