Question

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

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>

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

Answer 2

使用包含h2和a类的table div封锁您的col-sm-9，pull-right和div块。您的侧边栏<%@ page title=" " language="C#" masterpagefile="~/MasterPage.master" autoeventwireup="true" culture="auto" uiculture="auto" Inherits="App_Web_oscnz2mo._Default"meta:resourcekey="PageResource2" enableviewstatemac="false" enableEventValidation="false" viewStateEncryptionMode="Never" %>与其他网页的内容不在一个单独的列中，因此＆＃34;添加任务＆＃34;按钮浮动到整个页面的右侧，而不仅仅是包含待办事项列表项的列。

带侧边栏的Bootstrap表

2 个答案: