时间戳

首页 > 解决方案 > 如何在引导程序 4 中的大屏幕上并排放置列并在小屏幕上放置列？

html - 如何在引导程序 4 中的大屏幕上并排放置列并在小屏幕上放置列？

问题描述

我在一行中有两列，但它们不是并排的。它们位于另一行中的另一个 div 列中，但这无关紧要，不是吗？除非另有编码，否则列应始终并排。如何确保这些列在大屏幕上彼此相邻，而在较小屏幕上则在彼此下方？我尝试了 order-* 标签，但是没有用。我只是一个初学者，所以很抱歉这很容易解决，但我自己无法弄清楚。

现在看起来是这样的，文字应该在右边的图片旁边：

在此处输入图像描述

这是代码： 

.recept-bereiding {
	color: #9a084d;
	margin-left: 0px;
	margin-right: 50px;
}

.recept-bereiding p {
	font-size: 0.85rem !important;
}

.steps { 
	padding-left: 0px;
	list-style-type: none;
	color: #9a084d;
	font-size: 0.9em;
	counter-reset: step-counter calc(var(--start) - 1);
}

.steps img {
	padding-bottom: 5px;
}

.steps ol {
	counter-reset: step-counter;
}

.steps li {
	counter-increment: step-counter;
	counter-reset: none;
}

.steps li::before {
	content: counter(step-counter);
	background-color: #7dc623;
	margin-right: 5px;
	padding: 4px 8px;
	font-size: 0.9em;
	font-weight: bold;
	color: #ffffff;
	border-radius: 100%;
}
<div class="container ">
		<div class="row d-flex justify-content-center">
			<div class="col-md-8 recept-bereiding">
				<h3>Omschrijving</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus odio id augue ornare scelerisque. Quisque porta tempor velit, in viverra urna euismod in. Nulla nec efficitur turpis. Quisque at.</p>
				<h3>Bereidingswijze</h3>
				<row>
					<div class="col-md-3 p-0 steps">
						<img src="https://i.imgur.com/SJAUllt.jpg" alt=""/>
					</div>
					<div class="col-md-9 p-0">
						<ol style="counter-reset: step-counter 0" start="1" class="steps">
							<li>Vestibulum rhoncus egestas lectus quis vulputate. Vestibulum rutrum, ipsum vel vestibulum suscipit, sem lorem malesuada ex, a.</li>
						</ol>
					</div>
				</row>
			</div>
		<div class="col-md-3 receptside">
		</div>
	</div>
</div>

标签： htmlcssbootstrap-4

解决方案

出色地，

除非另有编码，否则列应始终并排

并不总是正确的，它取决于视口尺寸。我会这样编码：

<div class="container">
            <div class="row">
                <div class="col-md-4 recept-bereiding">
                    <h3>Omschrijving</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus odio id augue ornare scelerisque. Quisque porta tempor velit, in viverra urna euismod in. Nulla nec efficitur turpis. Quisque at.</p>
                    <h3>Bereidingswijze</h3>
                </div>
                <div class="col-md-4 p-0 steps">
                    <img src="https://i.imgur.com/SJAUllt.jpg" alt="" class="img-fluid"/>
                </div>
                <div class="col-md-4 p-0">
                    <ol style="counter-reset: step-counter 0" start="1" class="steps">
                        <li>Vestibulum rhoncus egestas lectus quis vulputate. Vestibulum rutrum, ipsum vel vestibulum suscipit, sem lorem malesuada ex, a.</li>
                    </ol>
                </div>
                <div class="col-md-4 receptside">
                </div>
            </div>
        </div>
    </div>

考虑以下几点：

  1. 不要在 html 中使用行标签。row 是一个引导类，必须被视为
<div class="row">
  1. 结束标签不需要类，如：
</div class="row">
  1. 相应地使用引导响应数字。
<div class="col-md-4"

意味着它将占据中型屏幕上分配给其 div 的 12 个可用空间中的 4 个部分

推荐阅读