Question

是否有可能以某种方式在左侧的引导程序中只有当它的平板电脑或手机时才会在右侧？（阅读;在底部，或在右栏之后）

桌面视图：

___________________________
|Menu 1  | the-main-column |
|Menu 2  |                 |
---------------------------

平板电脑/手机视图：

_________________
| menu 1         |
------------------
| the-main-column|
------------------
| menu 2         |
------------------

我设置如下：

<div class="container">
   <div class="col-md-4">
      <div class="menuone"></div>
      <div class="menutwo"></div>
   </div>
   <div class="col-md-8">
      <div class="content"></div>
   </div>
</div>

但这显然不会起作用

Answer 1

~~是的，你可以使用左栏上的.col-md-push-8将左栏推到右侧。~~

~~此外，您可以在主要内容上使用.col-md-pull-4。~~

感谢Evan提醒我发布代码演示，我今天通过阅读更新的问题对这个问题有了新的认识。

以下是解决方案：

＆＃13;

@media (min-width: 768px) {
  #content-container {
    position:relative;
  }
  #main {
    position:absolute;
    top:0;
    right:15px;
  }
  #menu-2 {
    float:none;
  }
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<div id="content-container">
  <div class="col-sm-4" id="menu-1">
    Menu 1
    <p>Try viewing in full page.</p>
  </div>
  <div class="col-sm-8" id="main">
    Main
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam feugiat pharetra nisl, vitae dapibus est imperdiet eu. Suspendisse id eros ligula. Maecenas eu massa ut quam consequat vulputate. Maecenas sed dui nisl. Quisque volutpat eleifend pellentesque. Praesent auctor bibendum sapien, eget mollis ligula molestie nec. Quisque aliquam lectus sit amet ante hendrerit vehicula. Fusce quis feugiat nunc. Suspendisse quis condimentum metus. Praesent sit amet ligula ex. Praesent viverra sit amet urna eu semper. Suspendisse venenatis varius maximus. </p>
  </div>
  <div class="col-sm-4" id="menu-2">Menu 2</div>
</div>

＆＃13;

该解决方案使用额外的CSS来工作。 CSS应该足够简单易懂。但你可以发表评论让我知道进一步解释。：）

Bootstrap 3在响应中向左移动左列

1 个答案: