html - Bootstrap 面板标题

标签 html css twitter-bootstrap

我正在尝试删除创建面板正文的边框,但在找到它时遇到了一些问题。

这是我的面板的代码:

<div class="panel">
        <div class="panel-heading"> <span class="panel-title"><i class="icon-user"></i>&nbsp;&nbsp;Training Team</span><button type="button" name="addProjectMember" class="btn btn-mini pull-right"><i class="icon-plus"></i>&nbsp;&nbsp;Add Project Member</button></div>
        <div name="trainingTeamBody" style="display:none;" class="panel-body">
        <span name="teamError"><br><div class="alert alert-warning"><center>No Project Members Assigned</center></div></span>
           <table name="teamTable" class="table table-hover" style="display: none;">
              <thead>
                 <tr>
                    <th><small>Member</small></th>
                    <th><small>Role</small></th>
                    <th><small>Supervisor</small></th>
                    <th><small>Date Assigned</small></th>
                    <th><small>Who Assigned</small></th>
                    <th><small>Action</small></th>
                 </tr>
              </thead>
              <tbody name="teamTableResults"></tbody>
           </table>
        </div>
     </div>

enter image description here

在上图中,我只希望它是我认为是标题的灰色条。如果没有要显示的结果,我只希望显示没有 body 轮廓的栏。

作为测试,我从代码中完全删除了正文,但边框仍然存在。

面板 CSS 中是否有导致此问题的部分我可以覆盖?

这是我通过使用以下 CSS 完成的 Bootstrap 2 中的面板:

 panel {
  padding: 15px;
  margin-bottom: 20px;
  background-color: #ffffff;
  border: 1px solid #dddddd;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

.panel-heading {
  padding: 10px 15px;
  margin: -15px -15px 15px;
  font-size: 17.5px;
  font-weight: 500;      
  background-color: #f5f5f5;
  border-bottom: 1px solid #dddddd;
  border-top-right-radius: 3px;
  border-top-left-radius: 3px;
}

.panel-footer {
  padding: 10px 15px;
  margin: 15px -15px -15px;
  background-color: #f5f5f5;
  border-top: 1px solid #dddddd;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
} 

.panel-primary {
  border-color: #428bca;
}

.panel-primary .panel-heading {
  color: #ffffff;
  background-color: #428bca;
  border-color: #428bca;
}

最佳答案

给你 - http://jsfiddle.net/AndrewL32/9ema30gx/2/

.panel { 边框:0!重要; }

希望对您有所帮助:)

关于html - Bootstrap 面板标题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28865720/

相关文章:

javascript - Firebase 中的更新删除其他条目

javascript - 如何仅使用 Javascript 动态创建带有上一个和下一个按钮的图像-视频缩略图 slider ?

javascript - 合并嵌套、重叠的 <strong> 和 <em> 标签

jquery - 如何使用 z-index 在前面显示 ui 时间选择器?

jquery - 在布局方面需要帮助 (jQuery)

javascript - 点击时 react 模态动画

html - Bootstrap : <a> removes left and right margin from span

javascript - 具有固定位置的可拖动 html 对象

javascript - 如何在模板中显示导航页面的路径结构(站点地图)

html - 调整 Bootstrap Jumbotron 的大小以适合背景图像