Twitter bootstrap 带侧边栏的引导表_Twitter Bootstrap_Responsive Design_Html Table

Twitter bootstrap 带侧边栏的引导表

twitter-bootstrap responsive-design

Twitter bootstrap 带侧边栏的引导表,twitter-bootstrap,responsive-design,html-table,Twitter Bootstrap,Responsive Design,Html Table,我一直在阅读有关网格系统的文章，一遍又一遍地玩弄我的代码，但无法让网站看起来像我想要的那样。我希望在“内容”区域旁边有一个侧边栏（基本上是一个表）。顶部是我的页面现在的样子，底部是我真正想要的样子事实证明这很难，因为我想在桌子的右上角有一个按钮。你能评论一下我目前的代码吗？对不起，这太乱了，我是Bootstrap的noob 旁注：这必须是移动兼容的 <div class="row"> <div class="continer-fluid">

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

。顶部是我的页面现在的样子，底部是我真正想要的样子

事实证明这很难，因为我想在桌子的右上角有一个按钮。你能评论一下我目前的代码吗？对不起，这太乱了，我是Bootstrap的noob

旁注：这必须是移动兼容的

<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>


你的登机外检查表
完成文书工作
你的最后一天
2015年7月1日

将

h2

、

和

table

块用一个

div

包围，该div具有类

col-sm-9

和

向右拉

。您的边栏

div

与页面的其他内容不在一个单独的列中，因此“添加任务”按钮将浮动到整个页面的右侧，而不仅仅是包含待办事项列表项的列。

围绕您的

h2

，

，和

表

带有单个

div的块

具有类

col-sm-9

和

向右拉

。您的边栏

div

与页面的其他内容不在单独的列中，因此“添加任务”按钮将浮动到整个页面的右侧，不仅仅是包含待办事项列表项的列。

正如@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>


滚动URL哈希
你的登机外检查表
完成文书工作
你的最后一天
2015年7月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>


滚动URL哈希
你的登机外检查表
完成文书工作
你的最后一天
2015年7月1日