col-*-12 (col-xs/col-sm/etc) 在 Bootstrap 3 中的使用

中的使用

关注

发信

关注(28)粉丝(399)

col-*-12 (col-xs/col-sm/etc) 在 Bootstrap 3 中的使用

本文介绍了col-*-12 (col-xs/col-sm/etc) 在 Bootstrap 3 中的使用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在 StackOverflow 上的代码示例和出售的主题中看到类似以下内容(从未在 Bootstrap 的示例中).


<div class="row"><div class="col-xs-12"><p>词到这里</p>

或


<div class="row"><div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"><p>词到这里</p>

这让我很抓狂，因为根据 Bootstrap 自己的文档和常识，这两种方法对于全宽单列都是不正确的.

你什么时候真正使用网格系统?col-*-12 什么时候开始使用?

解决方案

如果某物是全宽的，你根本不需要它.

学习:http://getbootstrap.com/examples/grid/

以上两个例子的正确 html 是这样的:


<p>词到这里</p><!--/.container 用于您不想超过 CSS 中为此类设置的宽度的整个元素分组 -->

如果您希望您的列是全宽的，它将位于您使用的最后一个列类之下.以下将是 col-sm-min-width 开始处的全宽(因此在 Bootstrap 3.x 的默认下载中为 767px 和 UNDER).

<div class="col-sm-4">东西</div><!--/.col-sm-4 --><div class="col-sm-8">东西</div><!--/.col-sm-8 --></div><!--/.row -->

不要忘记外部的 .container 或 .container-fluid(每个不改变宽度的内容分组一个)..container 或 .container-fluid 将 .row 上的负边距归零，这样你就不会得到水平滚动条.

当您使用 col-*-12 时，您需要在较小列类的最小宽度之后的全宽:

<div class="col-sm-6 col-md-12">东西</div><!--/.col-sm-6 col-md-12 --><div class="clearfix visible-md"></div><div class="col-sm-6 col-md-4">东西</div><!--/.col-sm-6 col-md-12 --></div><!--/.row -->

无论如何，col-*-12 在嵌套情况下会派上用场，尤其是在表单中.

I see something like the following in code examples on StackOverflow and in themes for sale even (never in Bootstrap's examples).

<div class="container">
  <div class="row">
    <div class="col-xs-12">
       <p>Words go here</p>
     </div>
    </div>
  </div>

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
       <p>Words go here</p>
     </div>
    </div>
  </div>

It drives me nuts because both are incorrect for full width single columns as per Bootstrap's own documentation and common sense.

When do you actually use the grid system? When does col-*-12 come into play?

解决方案

If something is full width, you don't need it at all.

Learn: http://getbootstrap.com/examples/grid/

The correct html for both of the above examples is this:

<div class="container">

       <p>Words go here</p>

      </div> <!--/.container for entire grouping of elements you do not want to exceed the width(s) set in the CSS for this class -->

If you want your columns to be full width, it will be under the last column class you used. The following will be full width below where the col-sm- min-width starts (so 767px and UNDER in a default download of Bootstrap 3.x).

<div class="row">
    <div class="col-sm-4">
     Stuff
    </div><!-- /.col-sm-4 -->
    <div class="col-sm-8">
     Stuff
    </div><!-- /.col-sm-8 -->
</div><!-- /.row -->

Don't forget the outer .container or .container-fluid (one per grouping of content that does not change width). The .container or .container-fluid zeros out the negative margin on the .row so you won't get horizontal scroll bars.

The situations when you use col-*-12 is where you want a full width AFTER the min-width of the smaller column class:

<div class="row">
    <div class="col-sm-6 col-md-12">
     Stuff
    </div><!-- /.col-sm-6 col-md-12 -->
  <div class="clearfix visible-md"></div>
    <div class="col-sm-6 col-md-4">
     Stuff
   </div><!-- /.col-sm-6 col-md-12 -->
</div><!-- /.row -->

Anyway, col-*-12 comes in handy in nesting situations, especially with forms.

这篇关于col-*-12 (col-xs/col-sm/etc) 在 Bootstrap 3 中的使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-22 14:24