Question

我在Mobirise的网站上使用了一个简单的Bootstrap模板，但遇到了一个问题。我需要创建5个连续带有按钮的Bootstrap卡，而不是最多提供4个。您可以在此处查看这些卡片的示例：https://mobirise.com/blocks/features-mobirise-4.html

如果我仅复制并粘贴一张卡的代码段，它只会显示在其他四张卡的下方中心。

<section class="features17 cid-r9nkCuNUpT" id="features17-1">




    <div class="container-fluid">
        <div class="media-container-row">
            <div class="card p-3 col-12 col-md-6 col-lg-3">
                <div class="card-wrapper">
                    <div class="card-img">
                        <img src="assets/images/01.jpg" alt="Mobirise">
                    </div>
                    <div class="card-box">
                        <h4 class="card-title pb-3 mbr-fonts-style display-7">
                            No Coding
                        </h4>
                        <p class="mbr-text mbr-fonts-style display-7">
                            Mobirise is an easy website builder - just drop site elements to your page, add content and style it to look the way you like with simple Bootstrap template.
                        </p>
                    </div>
                </div>
            </div>

            <div class="card p-3 col-12 col-md-6 col-lg-3">
                <div class="card-wrapper">
                    <div class="card-img">
                        <img src="assets/images/02.jpg" alt="Mobirise">
                    </div>
                    <div class="card-box">
                        <h4 class="card-title pb-3 mbr-fonts-style display-7">
                            Simplate Bootstrap Template
                        </h4>
                        <p class="mbr-text mbr-fonts-style display-7">
                            All sites you make with Mobirise are mobile-friendly. You don't have to create a special mobile version of your site.
                        </p>
                    </div>
                </div>
            </div>

            <div class="card p-3 col-12 col-md-6 col-lg-3">
                <div class="card-wrapper">
                    <div class="card-img">
                        <img src="assets/images/03.jpg" alt="Mobirise">
                    </div>
                    <div class="card-box">
                        <h4 class="card-title pb-3 mbr-fonts-style display-7">
                            Unique Styles
                        </h4>
                        <p class="mbr-text mbr-fonts-style display-7">
                            Mobirise Simple Bootstrap Template offers many site blocks in several themes, and though these blocks are pre-made, they are flexible.
                        </p>
                    </div>
                </div>
            </div>

            <div class="card p-3 col-12 col-md-6 col-lg-3">
                <div class="card-wrapper">
                    <div class="card-img">
                        <img src="assets/images/04.jpg" alt="Mobirise">
                    </div>
                    <div class="card-box">
                        <h4 class="card-title pb-3 mbr-fonts-style display-7">
                            Unlimited Sites
                        </h4>
                        <p class="mbr-text mbr-fonts-style display-7">
                           Mobirise gives you the freedom to develop as many websites as you like given the fact that it is a desktop app.
                        </p>
                    </div>
                </div>
            </div>


        </div>
    </div>

Answer 1

Bootstrap网格始终将显示屏的宽度分为12列。查看documentation了解更多信息。

让我引导您完成Bootstrap类：

<div class="card p-3 col-12 col-md-6 col-lg-3">

卡 =是引导卡
p-3 =填充：3px
col-12 =移动优先：此div将占据小屏幕上的所有12列，因此每行仅一张卡
col-md-6 =在中型屏幕上占据6列，因此您会看到两张卡片彼此相邻
col-lg-3 =在大屏幕上占据3列=连续4张卡

因此，如果您想在大屏幕上显示4张以上的卡片，则必须操作col-lg- *类。因为这现在告诉您的网格，每行最多只能包含4个元素。在这种情况下，我将继续并在其中加上“ col”，因为12不能被5整除。然后您将有5个大小相等的列。

像这样：

<div class="row">
  <div class="col">col1</div>
  <div class="col">col2</div>
  <div class="col">col3</div>
  <div class="col">col4</div>
  <div class="col">col5</div>
</div>

希望这会有所帮助。

Answer 2

有两种方法可以实现此目的。首先是修改引导程序核心，这是一个非常不好的做法，因为在大多数情况下，它将带来比解决方案更多的问题。

第二种也是最适合您的方法是创建一个包装类=“ col-10 offset-1”，该类将占用10列，并从每一侧以1列居中。对于引导程序3是“ col-md-10 col-md-offset-1” 比起您可以用col-2设置五个元素。这样，您将具有正确的响应能力，而且不会破坏任何东西。

简单的引导程序模板-卡行问题

2 个答案: