您是否需要使用Bootstrap的

您是否需要使用Bootstrap的

本文介绍了您是否需要使用Bootstrap的“容器"容器?和“行"如果您的内容要覆盖整个宽度?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我认为Bootstrap 3和Bootstrap 4的标准是

I think the standard of Bootstrap 3 and 4 is

<div class="container">
    <div class="row">
        <div class="col-md-4"> ... </div>
        <div class="col-md-8"> ... </div>   <!-- just add up to 12 -->
    </div>
</div>

但是,如果您有一个divtableform或任何元素,但您打算让它跨越整个宽度,该怎么办?然后,您是否完全需要containerrowcol-md-12,以使整个页面在Bootstrap 3和4的样式规则下都能很好地显示?

But what if you have a div, table, form, or any element, that you plan to just let it span the whole width? Then do you need the container or row or col-md-12 at all, for the whole page to display well under the styling rules of Bootstrap 3 and 4?

P.S.如果可能的话,请指向或引用与此相关的官方Bootstrap文档.

P.S. if possible, please point to or quote the official Bootstrap docs related to this.

推荐答案

简短答案:您要做需要使用container,但您不需要使用row.

Short answer: you do need to use container, but you don't need to use row.

您可以将元素直接放在containercontainer-fluid中.您不需要不需要使用网格(.row.col-*),并且单独的容器 可以用作内容的容器.仅在需要响应式12单元结构时才使用网格.

You can put elements directly in the container or container-fluid. You aren't required to use the grid (.row and .col-*), and the container alone can be used as a container of content. Only use the grid when you need the responsive 12-unit structure.

例如,这是有效的Bootstrap ...

For example, this is valid Bootstrap...

<div class="container">
   <h2>Hello World</h2>
   <p class="lead">Some other content...</p>
</div>

引导文档 ...

因此,container的目的有两个:1)容纳网格系统",以及2)包装站点内容".但是,当您使用网格(.row.col-*)时,需要一个容器来包装.row.

So, the purpose of container is two-fold: 1) to "house the grid system", and 2) to "wrap site contents". However, when you do use the grid (.row and .col-*), a container is required to wrap the .row.

即使基本启动模板,也使用container而不使用网格.

Even the basic starter template utilizes container without the grid.

总结...

  • 您可以单独使用.container.container-fluid来包含元素和页面内容.
  • 如果使用网格(.row.col-*),则.row必须位于.container.container-fluid内,并且.col-*必须位于.
  • You can use .container or .container-fluid alone to contain elements and page content.
  • If you use the grid (.row and .col-*), .row must be inside a .container or .container-fluid, and .col-* must be inside a .row.

这篇关于您是否需要使用Bootstrap的“容器"容器?和“行"如果您的内容要覆盖整个宽度?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-21 16:12