时间戳

首页 > 解决方案 > 无论我尝试什么，引导列都不会并排显示

css - 无论我尝试什么，引导列都不会并排显示

问题描述

我有以下代码：

                                <div class="mainptext">
                                    <h3><strong>Learn the following:</strong></h3>
                                    <div class="container">
                                        <div class="row">
                                            <div class="col-6">
                                                <ul>
                                                    <li>Lifts</li>
                                                    <li>False Deals</li>
                                                    <li>Side Slips</li>
                                                    <li>Passes</li>
                                                    <li>Palming</li>
                                                    <li>False Shuffles</li>
                                                </ul>
                                            </div>
                                            <div class="col-6">
                                                <ul>
                                                    <li>False Cuts</li>
                                                    <li>Color Change</li>
                                                    <li>Crimps</li>
                                                    <li>Jogs</li>
                                                    <li>Peaks</li>
                                                    <li>Glides</li>
                                                    <li>Reverses</li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>

无论我做什么，结果都是第二列直接出现在另一列的下方。

保证金 - 100%，它不应该是。

我使用以下https://getbootstrap.com/docs/4.1/layout/grid/#equal-width作为参考。

我从事 Web 开发已经超过 35 年了，这非常简单，让我很吃惊。

在此处输入图像描述

此代码位于文章标签内。它不是页面的全宽，而是其中的一部分。 “注意：忽略 DJ 设备。那张图片将被替换” 在此处输入图像描述

这是包含盒子的部分：

            <!-- Main -->
            <div id="main" class="site-main container_12">

                <!-- Left column -->
                <div id="primary" class="grid_8">

                    <!-- About Us -->
                    <article class="single-post">
                        <header class="entry-header grad1">
                            <h1 id="equipTitle" class="entry-title">Welcome to our Magic Shop</h1>
                            <div class="clear"></div>
                        </header>

                        <div class="entry-content">
                            <br>

                            <!-- Magic Page 1 -->
                            <div id="magic1" class="entry-content-post equip-box-1">
                                <h3><strong>Card Magic Overview</strong></h3>

                                <p class="mainptext">Card manipulation is the branch of magic that deals with creating effects using sleight of hand techniques involving playing cards. Card manipulation is often used in magical performances, especially in close-up, parlor,
                                    and street magic. This is how I learned.</p>

                                <div class="mainptext">
                                    <h3><strong>Learn the following:</strong></h3>
                                    <div class="container">
                                        <div class="row">
                                            <div class="col-6">
                                                <ul>
                                                    <li>Lifts</li>
                                                    <li>False Deals</li>
                                                    <li>Side Slips</li>
                                                    <li>Passes</li>
                                                    <li>Palming</li>
                                                    <li>False Shuffles</li>
                                                </ul>
                                            </div>
                                            <div class="col-6">
                                                <ul>
                                                    <li>False Cuts</li>
                                                    <li>Color Change</li>
                                                    <li>Crimps</li>
                                                    <li>Jogs</li>
                                                    <li>Peaks</li>
                                                    <li>Glides</li>
                                                    <li>Reverses</li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <p class="mainptextnext">Click NEXT to continue...</p>

                                <div class="grid_4 margin-bottom slider-arrow arrow-box-1">
                                    <a class="prevslidee load-item" onclick="funcs.goLeft('magic1','magic0')">Prev</a>
                                    <a class="nextslidee load-item" onclick="funcs.goRight('magic1','magic2')">Next</a>
                                </div>

....
Thoughts?

更新：这是我在 DEV 控制台中看到的 在此处输入图像描述 然后控制台日志： 在此处输入图像描述

标签： cssbootstrap-4

解决方案

我只是复制并粘贴您的 html 元素，它工作正常，我使用Bootstrap 版本 4.1.3作为 CDN。

我认为覆盖列上的样式，因此需要从Inspect Element中找到覆盖样式。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<div class="mainptext">
    <h3><strong>Learn the following:</strong></h3>
    <div class="container">
        <div class="row">
            <div class="col-6">
                <ul>
                    <li>Lifts</li>
                    <li>False Deals</li>
                    <li>Side Slips</li>
                    <li>Passes</li>
                    <li>Palming</li>
                    <li>False Shuffles</li>
                </ul>
            </div>
            <div class="col-6">
                <ul>
                    <li>False Cuts</li>
                    <li>Color Change</li>
                    <li>Crimps</li>
                    <li>Jogs</li>
                    <li>Peaks</li>
                    <li>Glides</li>
                    <li>Reverses</li>
                </ul>
            </div>
        </div>
    </div>
</div>

推荐阅读