Question

我的页面中有一个四列网格，每列包含徽标，<h2>和<p>。

如何水平对齐段落以使它们匹配？当h2行需要第二行时，它会按下段落。我希望h2能够在不影响段落的情况下占用第二行。

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    
    <section id="services">
        <div class="container">
            <div class="row text-center">
    
                <div class="col-sm-3">
                    <i class="fa fa-search" aria-hidden="true"></i>
                    <h2>SEO Copywriting</h2>
                    <p>Get more eyes on your work.</p>
                </div><!-- /col -->
    
                <div class="col-sm-3">
                    <i class="fa fa-video-camera" aria-hidden="true"></i>
                    <h2>Video Scripts</h2>
                    <p>When words aren’t enough.</p>
                </div><!-- /col -->
    
                <div class="col-sm-3">
                    <i class="fa fa-rss" aria-hidden="true"></i>
                    <h2>Blog Entries</h2>
                    <p>Pick a subject, any subject.</p>
                </div><!-- /col -->
    
                <div class="col-sm-3">
                    <i class="fa fa-pencil-square-o" aria-hidden="true"></i>
                    <h2>Copy Editing & Proofreading</h2>
                    <p>Take your work that extra mile.</p>
                </div><!-- /col -->
    
            </div><!-- /row -->
        </div><!-- /container -->
    </section><!-- /services -->

Answer 1

在这种情况下，解决方案有点复杂，可能看起来不那么明显。

首先，您需要将元素拆分为不同的列，即段落必须分成不同的列。我们需要对列使用md断点，因为sm在这种情况下太小了。

接下来，您必须使用order类根据屏幕大小对列重新排序。

因此，前四列分别获得了类order-1，order-2，order-3和order-4，这意味着它们将始终在所有断点处保持该顺序。

位于HTML下方的段落列也将首先获得相同的订单类。但另外，段落列也获得了order-md-5类，它有效地将所有段落向下推入中等（md）或更大的屏幕。

这是完整的，有效的代码段（点击下面的＆＃34;运行代码段＆＃34;按钮并展开到完整页面进行测试）：

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<section id="services">
    <div class="container">
        <div class="row text-center">

            <div class="col-md-3 order-1">
                <i class="fa fa-search" aria-hidden="true"></i>
                <h2>SEO Copywriting</h2>
            </div><!-- /col -->

            <div class="col-md-3 order-2">
                <i class="fa fa-video-camera" aria-hidden="true"></i>
                <h2>Video Scripts</h2>
            </div><!-- /col -->

            <div class="col-md-3 order-3">
                <i class="fa fa-rss" aria-hidden="true"></i>
                <h2>Blog Entries</h2>
            </div><!-- /col -->

            <div class="col-md-3 order-4">
                <i class="fa fa-pencil-square-o" aria-hidden="true"></i>
                <h2>Copy Editing &amp; Proofreading</h2>
            </div><!-- /col -->
            
            <div class="col-md-3 order-1 order-md-5">
                <p>Get more eyes on your work.</p>
            </div><!-- /col -->

            <div class="col-md-3 order-2 order-md-5">
                <p>When words aren’t enough.</p>
            </div><!-- /col -->

            <div class="col-md-3 order-3 order-md-5">
                <p>Pick a subject, any subject.</p>
            </div><!-- /col -->

            <div class="col-md-3 order-4 order-md-5">
                <p>Take your work that extra mile. Lorem ipsum dolor sit amet added text for testing.</p>
            </div><!-- /col -->
            
        </div><!-- /row -->
    </div><!-- /container -->
</section><!-- /services -->

＆＃13;

Bootstrap网格 - 4列 - 不均匀的文本

1 个答案: