3

我正在学习引导程序。我使用绘画快速制作了我想尝试使用 Bootstrap 4 及其新的 flex 支持创建的模型。我的问题出现在问题绘画草图中；由于 Flexbox 均衡了高度，因此评论部分出现在相关部分的末尾下方。

我已经尝试将评论部分放在内容列中，然后尝试重新排列代码中的 CSS flex 顺序，但顺序 CSS 规则似乎只在每一行中起作用（似乎无法从其他行插入内容） .

原始代码：

<div class="container">
<div class="row">

    <div class="col-md-8 content">
    <br>
        <h2 class='var-heading'>heading</h2>
        <p>Lorem ipsum dolor sit amet, consectetur ad ut purus rutrum, mattis neque non, ornare ipsum. Integer ipsum risus, fermentum vel fringilla et, blandit molestie tellus. Sed eu lobortis dolor. Integer enim leo, tristique ut ornare sed, tincidunt at mauris!</p>
        <div class="card">
        social media bar
        </div>
    </div>

    <div class="col-md-4 related">
        <div class="row">

            <div class="col-md-6">
                <div class="card card-inverse" style="background-color: #333; border-color: #333;">
                  <div class="card-block">
                    <p class="card-text">tag 1 longer tag</p>
                  </div>
                </div>
            </div>


            <div class="col-md-6">
                <div class="card card-inverse" style="background-color: #333; border-color: #333;">
                  <div class="card-block">
                    <p class="card-text">tag 2</p>
                  </div>
                </div>
            </div>

            <div class="col-md-6">
                <div class="card card-inverse" style="background-color: #333; border-color: #333;">
                  <div class="card-block">
                    <p class="card-text">tag 3 longer tag</p>
                  </div>
                </div>
            </div>

            <div class="col-md-6">
                <div class="card card-inverse" style="background-color: #333; border-color: #333;">
                  <div class="card-block">
                    <h4 class="card-title">tag 4 longer tag</h4>
                  </div>
                </div>
            </div>

            <div class="col-md-6">
                <div class="card card-inverse" style="background-color: #333; border-color: #333;">
                  <div class="card-block">
                    <h4 class="card-title">tag 5</h4>
                  </div>
                </div>
            </div>
        </div>
    </div>

    <div class='col-md-2 comments'>
    commnents
    </div>

</div>
</div>

问题： 问题

以下是理想的移动和桌面布局：

理想的桌面 理想的手机

4

3 回答 3

1

这可能对您不起作用，但这是我能想到的使用纯 css 的唯一方法。本质上：

@media (min-width: 600px) {
    .content {
        float: left;
        width: 50%;
    }

    .related {
        float: right;
        width: 50%;  
    }

    .comments {
        float: left;
        width: 50%;  
    }
}

不确定这将如何适应 Bootstrap，但希望您可以使用该概念来找出解决方案。完整的演示。

于 2015-11-18T19:51:24.217 回答
0

使用最新的 Bootstrap 4 alpha 6，这种布局很容易。

   <div class="row d-block">
        <div class="col-md-8 float-left content">
            <div class="card card-block">
                <h3>Content</h3>
            </div>
        </div>
        <div class="col-md-4 float-right related">
            <div class="card card-block">
                <h3>Related</h3>
            </div>
        </div>
        <div class="col-md-8 float-left comments">
           <div class="card card-block">
               <h3>Comments</h3>
           </div>
        </div>
   </div>

http://www.codeply.com/go/UjirdJIabc

于 2017-03-21T13:51:43.533 回答
-1

我想做的事情在 flex 中是不可行的；以这种方式回答我的问题，以防其他人遇到类似问题。

我最终使用了一种不同的设计，它在媒体查询中使用了一些“隐藏”来获得类似的效果。

于 2015-12-02T02:54:57.263 回答