Bootstrap table 带有侧边栏

Question

我一直在阅读有关网格系统的信息，并一遍又一遍地研究我的代码，但无法使网站看起来像我想要的那样。我想要 "content" 区域（基本上是 table）旁边的边栏。

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

事实证明这很困难，因为我想要 table 右上角的按钮。你能批评我当前的代码吗？抱歉，它有点乱，我是 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>

Answer 1

用具有类 col-sm-9 和 [=15] 的单个 div 包围您的 h2、a 和 table 块=].您的侧边栏 div 与页面的其余内容不在单独的列中，因此 "Add task" 按钮浮动到整个页面的右侧，而不仅仅是包含待办事项的列列出项目。

Answer 2

您在类列中的某些内容似乎有误，正如@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>

Bootstrap table 带有侧边栏

Bootstrap table with a sidebar

html-table

responsive-design

twitter-bootstrap