带侧边栏的引导表答案

【问题标题】：Bootstrap table with a sidebar带侧边栏的引导表
【发布时间】：2015-09-01 16:45:29
【问题描述】：

我一直在阅读有关网格系统的信息，并一遍又一遍地使用我的代码，但无法让网站看起来像我想要的那样。我想要一个“内容”区域（基本上是一个表格）旁边的侧边栏。

Here is an image to help the visual。顶部是我的页面现在的样子，底部是我真正的样子。

这很困难，因为我想要一个位于表格右上角的按钮。你能批评我当前的代码吗？抱歉，这很混乱，我是 Bootstrap 的菜鸟。

旁注：这必须与移动设备兼容。

<div class="row">
     <div class="continer-fluid">
         <div class="row-fluid">
             <h2 class="col-sm-7">Your Off-Boarding Checklist</h2>
             <a class="btn btn-default btn-lg col-sm-1 pull-right" id="addtask" href="#">Add Task &raquo;</a>

             <table class="table table-condensed table-hover table-striped table-bordered col-sm-12">
                <tr>
                    <td></td>
                    <td>
                        Complete Paperwork
                        <span class="glyphicon glyphicon-menu-right pull-right" aria-hidden="true"></span>
                    </td>
                </tr>
             </table>

            <div class="col-sm-3 pull-right container-fluid" id="sidebar">
               <h2>Your Last Day</h2>
               <h3>July 1, 2015</h3>
            </div>
         </div>
     </div>
</div>

【问题讨论】：

标签： twitter-bootstrap responsive-design html-table

【解决方案1】：

正如@TomCat 指出的那样，您似乎在错误的元素上设置了一些列类 - 也许这会有所帮助：

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Scrolling URL Hash</title>
  <meta name="description" content="Webpage for xxxx">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <style>

  </style>
</head>

<body>
  <div class="row">
    <div class="continer-fluid">
      <div class="row-fluid">
        <div class="col-sm-7">
          <h2>Your Off-Boarding Checklist</h2>
          <a class="btn btn-default btn-lg col-sm-3 pull-right" id="addtask" href="#">Add Task &raquo;</a>
          <table class="table table-condensed table-hover table-striped table-bordered col-sm-12">
            <tr>
              <td>
              </td>
              <td>
                Complete Paperwork
                <span class="glyphicon glyphicon-menu-right pull-right" aria-hidden="true"></span>
              </td>
            </tr>
          </table>
        </div>
        <div class="col-sm-3 pull-right container-fluid" id="sidebar">
          <h2>Your Last Day</h2>
          <h3>July 1, 2015</h3>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

【讨论】：

【解决方案2】：

将 h2、a 和 table 块与具有 col-sm-9 和 pull-right 类的单个 div 包围起来。您的侧边栏div 与页面的其余内容不在单独的列中，因此“添加任务”按钮浮动到整个页面的右侧，而不仅仅是包含待办事项列表项的列。

【讨论】：