主页 / 问题 / 816746
Accepted
Стас Борзых
Asked:2020-04-20 14:38:23 +0800 CST2020-04-20 14:38:23 +0800 CST

如何在bootsrap 3中居中列

  • 772

大家好，告诉我如何在boostrap 3中将这些块居中？

   <div class="row">
        <div class=" col-xs-2 col-md-3">
            <div class="card mb-4 box-shadow">
                <img src="#" class="img-fluid">
                <div class="card-body">
                    <p class="card-text text-center"><b>text</p>
                </div>
                <div class="text-center">
                <a class="btn btn-lg text-uppercase u-btn-green cs-font-weight-700 cs-font-size-11 cs-color-white cs-color-white--hover cs-bg-primary--hover cs-brd-none rounded-0 cs-px-20 speaker_button_container" href="#" style="margin-bottom: 5px;">подробнее</a>
                </div>
            </div>
        </div>

        <div class=" col-xs-2 col-md-3">
            <div class="card mb-4 box-shadow">
                <img src="#" class="img-fluid">
                <div class="card-body">
                    <p class="card-text text-center"><b>text</p>
                </div>
                <div class="text-center">
                <a class="btn btn-lg text-uppercase u-btn-green cs-font-weight-700 cs-font-size-11 cs-color-white cs-color-white--hover cs-bg-primary--hover cs-brd-none rounded-0 cs-px-20 speaker_button_container" href="#" style="margin-bottom: 5px;">подробнее</a>
                </div>
            </div>
        </div>

        <div class=" col-xs-2 col-md-3">
            <div class="card mb-4 box-shadow">
                <img src="#" class="img-fluid">
                <div class="card-body">
                    <p class="card-text text-center"><b>text</p>
                </div>
                <div class="text-center">
                <a class="btn btn-lg text-uppercase u-btn-green cs-font-weight-700 cs-font-size-11 cs-color-white cs-color-white--hover cs-bg-primary--hover cs-brd-none rounded-0 cs-px-20 speaker_button_container" href="#" style="margin-bottom: 5px;">подробнее</a>
                </div>
            </div>
        </div>

    </div>

如果我有 4 个块，那么它们都在中心很酷地对齐，如果有 3 个块，那么如何使用标准的 boostrap 工具使它们始终在中心对齐？

bootstrap

1 个回答

  1. Best Answer

    这是完成的解决方案：https ://codepen.io/anon/pen/mLJVRm

    .container>.row>some cols

    关键是引导网格应该由 12 列 (4 * 3 = 12) 组成，并且被框在包含 .row 的容器或无量纲容器 (.container-fluid) 中如果保持固定的列宽很重要，然后改变容器的宽度

    • 0

相关问题