Question

我使用bootstrap并将所有内容放在容器中;这就是我想要的所有内容。问题是我还想要一个右侧的固定栏，宽度为250px，带有像按钮的facebook，也许还有一些文字。

我还想要的是，当我将浏览器重新调整为移动视图时，整个右侧栏将显示在容器后面的右下方。

我试图围绕容器制作行，但这不起作用

<div class = "row" >
   <div  class = "col-sm-6 col-md-4">
      <div class ="container">
        ...
      </div>
   </div>

   <div  class = "col-sm-6 col-md-4">
      <div class ="container">
        ...
      </div>
    </div>
</div>

我也尝试将div浮动到右边，但是在移动视图中不起作用..

我已经搜索了几个小时，下载了网页以查看源代码，并尝试了许多我甚至无法记住但没有结果的事情。有没有人有想法？

Answer 1

如果可以帮助你，这是一个小提琴：

bootply http://www.bootply.com/117047

<强> HTML

<div class="container">
<div class="row">
  <div class="col-xs-12 col-sm-8 leftarea">
    left area
  </div>
  <div class="col-xs-12 col-sm-4 right-atea">
      <div class="row tofix">    
        <div class="well col-xs-12 rightfixed"> 
          right fixed
        </div>
    </div>
  </div>
  </div>
</div>

<强> CSS

.leftarea{
  height:950px;
    background-color:blue;
    color:white;
  }


    .rightfixed{
      background-color:red;
          height:250px;

        }

    @media (min-width: 940px) { 

    .rightfixed{
        position: fixed;
            width:250px;
      }

     }

Answer 2

我可以看到我的问题可能有点不清楚。我发现我的代码尝试都是垃圾。但我找到了一个解决方案：

<div class = "container">
    <div class = "row">
       <div class = "col-lg-9">
           <div class = "panel panel-default">
               <div class = "panel-body">
                 Main content
               </div>
           </div>
       </div> 

       <div class = "col-lg-3">
           <div class = "list-group">
            Side Bar Content
           </div>
       </div>
     </div>
</div>

这将使主要内容容器在侧面具有不同元素的条形图。 YouTube上的编码指南有一个很好的教程。（http://goo.gl/ZfH6rk）

带有内容和facebook按钮的Bootstrap容器

2 个答案: