Question

我检查了所有内容，但无法弄清楚为什么列没有正确居中。

正如您所看到的，最右边的黄色列在容器和最左侧之间有更多空间。我认为这是列本身，但我检查了边距，排除故障，无法弄清楚原因。

这是我的代码：

<div class="container-fluid wrapper">



        <div class="row">
        <div class="header">

            <div class="col-xs-12 col-sm-6 col-lg-3">

                <a href="{{ URL::route('home') }}">

                <div class="header_group">
                <img src="../../images/logo.png">
                </div><!--header group -->
                </a>

            </div>

            <div class="col-xs-12 col-sm-6 col-lg-3"></div>


            <div class="col-xs-12 col-sm-6 col-lg-3">

            </div>

            <div class="col-xs-12 col-sm-6 col-lg-3">
            @include('layout.navigation')
            </div>


        </div><!-- main header -->
        </div><!-- row -->











    <h2 class="center2">How It Works</h2><br />
     <div class="process">

        <div class="col-md-12">
        <div class="row">
            <div class="col-xs-12 col-sm-6 col-lg-4">
            1
            </div>

            <div class="col-xs-12 col-sm-6 col-lg-4">
                <p>Watch the video if you don't like to read</p>
                <div class="advert_video">
                    <div class="embed-responsive embed-responsive-4by3">
                    <iframe class="embed-responsive-item" src="http://youtube/Fr6IgzsLEbg"></iframe>
                    </div>
                </div>
            </div>

            <div class="col-xs-12 col-sm-6 col-lg-4">
            3
            </div>


        </div>




            <div class="row content">

            <div class="col-xs-12 col-sm-8 col-lg-4">

                <div class="col-md-4 process1">
                <h2 class="center">Start<br /> Apologizing</h2>
                <br />
                <p>
                Create and account. It only takes 45 seconds.
                The first month is free!
                Any month after is $9.99 for 20 apologies.
                </p>
                <p>
                Send your friend a taylored apology.
                </p>
                <input class="btn btn-primary btn-block" type="submit" name="submit" value="Start Apologizing">
                </div>


            </div><!-- col 8 -->

            <div class="col-xs-12 col-sm-8 col-lg-4">

                <div class="col-md-4 process2">
                <h2 class="center">Send Apology</h2>
                <p>
                    <ol>
                        <li>Invite a friend that you want to apologize to.</li>
                        <li>Wait for your friend to respond, then you can send them an apology.</li>
                        <li>You can pick from a list of trendy apologies or make a custom one.</li>
                    </ol>

                </div>

            </div>

            <div class="col-xs-12 col-sm-8 col-lg-4">

                <div class="col-md-4 process3">
                <h2 class="process_text">Hug It Out</h2>
                <p>
                When your friend recieves their apology sent from you and memakemistake they can text back with one of three responses.
                <ol>
                    <li>Not Now</li>
                    <li>Maybe</li>
                    <li>Forgiven</li>
                </ol>
                <p>
                You will then recieve their reply via text and on memakemistake.com
                </p>
                </div>

            </div>

            </div>
            </div>
            </div><!-- process -->



        <div class="footer">All rights reserved</div>
    </div><!-- container -->

twitter bootstrap 3列没有正确居中

0 个答案: