Загрузочный стол с боковой панелью

Я читал о сетчатой системе и снова и снова играл с моим кодом, но не могу заставить веб-сайт выглядеть так, как я этого хочу. Я хочу боковую панель рядом с областью «контента» (в основном таблицей).Загрузочный стол с боковой панелью

Here is an image to help the visual. Наверху, как выглядит моя страница, а внизу - это то, на что я действительно выгляжу.

Это сложно, поскольку я хочу кнопку в правом верхнем углу стола. Можете ли вы критиковать мой текущий код? Извините, это довольно грязно, и я ноб в Bootstrap.

Sidenote: Это должно быть совместимо с мобильными устройствами.

<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-06-16 l33tspeak

Похоже, у вас есть некоторые из классов столбцов на неправильных элементов, как @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>

источник

2015-06-16 18:08:41 rphv

Окружите вашего h2, a и table блоки с одним div имеющие классов col-sm-9 и pull-right. Ваша боковая панель div не находится в отдельном столбце от остальной части содержимого вашей страницы, и поэтому кнопка «Добавить задачу» становится плавающей справа от всей страницы, а не только столбцом, содержащим элементы списка дел.

источник

2015-06-16 18:07:45

Благодаря человеку! Хорошее разъяснение. – l33tspeak

Загрузочный стол с боковой панелью

ответ

Смежные вопросы