可以在 bootstrap 的 col 类中使用 col 类吗? [英] Is it ok to use col class inside col class in bootstrap?

问题描述

我想在带有 hr 元素的段落下方画一条线.propbelem 是 p 元素在引导程序中有 15px 的填充，但 hr 元素跨越到完整的可用宽度.段落下方的线条向左延伸 15 像素，向右延伸 15 像素至段落宽度.所以我只是做了以下事情:

 
<div class="col-lg-12 text-justify"><p>一些文字在这里.</p>
<div class="row"><div class="col-lg-12"><div class="col-lg-12"><hr></div></div>

我将 col-lg-12 直接嵌套在 col-lg-12 中.但是在引导程序中，我们应该将 .col 嵌套在 .row 类中.那么这里可以在 col 类中使用 col 类吗?

解决方案

不. 这不是 Bootstrap 最佳实践，因为正如你提到的 col 应该在行内.效果将是额外的间距内柱的左右两侧.内列将环绕，而不是按预期水平布局.

<块引用>

"内容必须放在列中，并且只有列可以放在行的直接子行"

I want to draw a line below a paragraph with hr element. The propbelem is that the p element has 15px padding in bootstrap but the hr element spans to the full available width. The line below the paragraph extends 15px left and 15 right to the paragraph's width. So I just did the following:

             <div class="row">
              <div class="col-lg-12 text-justify">
                <p> 
                  Some text is here.
                </p>

              </div>
              <div class="row">
                <div class="col-lg-12"> <div class="col-lg-12"><hr></div></div>
              </div>

I nested col-lg-12 directly inside col-lg-12. But in bootstrap we ought to nest .col inside .row classes. So is it okay use col class inside col class here?

解决方案

No. It's not a Bootstrap best practice since as you mentioned col should be inside row.. The effect will be extra spacing on the left and right side of the inner col. The inner columns will wrap and not layout horizontally as expected.

"content must be placed within columns and only columns may be immediate children of rows"

这篇关于可以在 bootstrap 的 col 类中使用 col 类吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！