Question

我发现这个问题很难在标题中描述。

我有一个col-md-8和一个col-md-4入级div。这为我提供了一个漂亮的侧边栏风格布局。因此，当它包裹在较小的设备上时，它将堆叠。但是我有另一个col-md-8 div，其内容我想要位于另一个col-md-8之下。但是，因为它是这样的，它倾向于将其视为行。

查看我已制作的codepen mockup。（基本上我希望较低的段落符合最顶部的段落然后被我的侧边栏推下来。）这可能吗？谢谢！

修改的我刚刚在Balsamiq做了一个快速模型：平板电脑：https://i.imgur.com/U5xC7g3.png手机：https://i.imgur.com/FvZG0IZ.png

希望这是有道理的

Answer 1

可能是这样的：

<div class="col-md-8 pull-left">content1</div>
<div class="col-md-12 col-xs-12 col-lg-4 pull-right">sidebar</div>
<div class="col-md-8 pull-left">content2~3</div>

http://codepen.io/anon/pen/vKbEBQ

Answer 2

您可以执行此操作，但您需要将所有内容保留在col-md-8中。这是更新后的笔：

http://codepen.io/anon/pen/BzraOE?editors=1010

代码改变了：

def is_anagram(word):
    scrabble_dict = open('sowpods.txt')
    for x in scrabble_dict:
        x = sorted(x)
        x = x.remove('\n')
        word = sorted(word)
        if word == x:
            print(word)

Answer 3

Demo

使用col-md-push- *和col-md-pull - *

  <div class="col-md-4 col-md-push-8">Sidebar</div>
  <div class="col-md-8 col-md-pull-4">Top Content</div>
  <div class="col-md-8 col-md-pull-4">Bottom Content</div>

修改

好的，你希望这些段落在桌面上触摸，但是它们之间的菜单在移动设备上。因此，使用原始代码，您可以将ID添加到底部col-md-8并使用自定义媒体查询，如：

@media(min-width:750px){ #bottom{ margin-top:-850px } }

更新了Demo

Answer 4

也许我误解了你的问题，但是你有没有理由将你的第二段文字分开？如果删除第二个col-md-8并将该文本添加到第一个，它将在移动设备中堆叠而不在桌面视图中创建空白区域：

<div class="container">
<div class="col-md-8">all text...</div>
<div class="col-md-4">side bar</div>
</div>

Updated codepen

Answer 5

您必须将所有文本放在col-md-8中，然后将所有侧边栏放在col-md4中

co col-md-8将成为＆＃34; left＆＃34;的父母。侧面 - 并且在此可以是另一个col-md-8，并且col-md-4将是侧边栏的父级，并且可以是另一个col-md-4但是它不是必需的

以下是代码：

<div class="container">
  <div class="col-md-8">
  <div class="col-md-8">
    <h1>This works amazing on mobile</h1>
    <p>The Museum's rich and varied collections allow us to present money as a fascinating cross-curricular topic. We have consulted widely with teachers and other education professionals to deliver a schools' service which closely supports the Curriculum for Excellence. We hope that you will find it both exciting and relevant!</p>
  </div> 
  <div class="col-md-8"><h2>But this is shocking on desktop</h2>
    <p>Children visiting the Museum will engage in hands-on activities based around our extensive collection of original artefacts. These sessions are led by Museum staff and are free of charge. To find out more about the themes we cover, how a school visit is structured, and how to make a booking, please see below.</p>
<p>At present the activities are largely aimed at upper primary pupils (P5-7) and a maximum class size of 33. However, we are happy to adapt them for secondary pupils and visitors with special needs. Please contact us to discuss your requirements.</p>

    <h2>I want to be with the big boys! ^</h2>
    <p>Children visiting the Museum will engage in hands-on activities based around our extensive collection of original artefacts. These sessions are led by Museum staff and are free of charge. To find out more about the themes we cover, how a school visit is structured, and how to make a booking, please see below. 

At present the activities are largely aimed at upper primary pupils (P5-7) and a maximum class size of 33. However, we are happy to adapt them for secondary pupils and visitors with special needs. Please contact us to discuss your requirements.</p>
</div>

  </div>
  <div class="col-md-4">
    <div class="well"><h1>Sidebar Content</h1></div>
    <div class="well"><h1>Sidebar Content</h1></div>
        <div class="well"><h1>Sidebar Content</h1></div>
  </div>
</div>

Tuck Bootstrap列下

5 个答案: