引导网格未正确显示

本文介绍了引导网格未正确显示的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

如何在没有大空间的情况下正确显示我的网格并且看起来不错?

我的代码:

<div class="first"><div 类="容器"><div 类="行"><div class="col-md-6"><img src="http://img.uefa.com/MultimediaFiles/Photo/competitions/General/02/35/49/87/2354987_w2.jpg" class="img-responsive"/></div><div class="col-md-3"><img src="http://img.uefa.com/MultimediaFiles/Photo/competitions/Comp_Matches/01/83/81/26/1838126_s2.jpg" class="img-responsive"/></div><div class="col-md-3"><img src="http://img.uefa.com/MultimediaFiles/Photo/competitions/Comp_Matches/02/36/89/27/2368927_s2.jpg" class="img-responsive"/></div><div class="col-md-6"><img src="http://i.telegraph.co.uk/multimedia/archive/03498/BEAU_3498448b.jpg" class="img-responsive"/></div><div class="col-md-3"><img src="http://img.uefa.com/MultimediaFiles/Photo/competitions/Comp_Matches/01/83/81/26/1838126_s2.jpg" class="img-responsive"/></div><div class="col-md-3"><img src="http://img.uefa.com/MultimediaFiles/Photo/competitions/Comp_Matches/02/36/89/27/2368927_s2.jpg" class="img-responsive"/></div></div></div>

也许我应该使用任何 JS 脚本或其他东西?请帮忙:)

解决方案

你需要清除添加到列中的float(列有float: left应用于它们默认情况下)在您使用的断点处 (col-md-* 为 992px) 或当您总共有 12 列时将列放在单独的行中.

<div classes=container><div 类=行><div 类=col-*-6><div 类=col-*-6><div><!-- 等于 12 列 --><div 类=行><div 类=col-*-6><div 类=col-*-3><div 类=col-*-3><div><!-- 等于 12 列 -->

使用行的示例

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="样式表"/><div 类="容器"><div 类="行"><div class="col-md-6"><img src="http://placehold.it/500x250/000" class="img-responsive"/></div><div class="col-md-3"><img src="http://placehold.it/250x250/f00" class="img-responsive"/></div><div class="col-md-3"><img src="http://placehold.it/250x250/ff0" class="img-responsive"/></div></div><div 类="行"><div class="col-md-6"><img src="http://placehold.it/500x250/000" class="img-responsive"/></div><div class="col-md-3"><img src="http://placehold.it/250x250/f00" class="img-responsive"/></div><div class="col-md-3"><img src="http://placehold.it/250x250/ff0" class="img-responsive"/></div></div><div 类="行"><div class="col-md-6"><img src="http://placehold.it/500x250/000" class="img-responsive"/></div><div class="col-md-3"><img src="http://placehold.it/250x250/f00" class="img-responsive"/></div><div class="col-md-3"><img src="http://placehold.it/250x250/ff0" class="img-responsive"/></div></div></div>

示例自己清除浮动@ 992px，同时仅对所有列使用单行.注意:确保以某种方式指定这些列，这样就不会干扰其他地方的网格；该示例使用通用 .item 类来处理此问题，但可以通过多种方式完成.

参见 nth-child 和 clear 在 MDN 上了解更多信息.

@media (min-width: 992px) {.item:nth-child(3n+1) {清除:左；}}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="样式表"/><div 类="容器"><div 类="行"><div class="col-md-6 item"><img src="http://placehold.it/500x250/000" class="img-responsive"/></div><div class="col-md-3 项目"><img src="http://placehold.it/250x250/f00" class="img-responsive"/></div><div class="col-md-3 项目"><img src="http://placehold.it/250x250/ff0" class="img-responsive"/></div><div class="col-md-6 item"><img src="http://placehold.it/500x250/000" class="img-responsive"/></div><div class="col-md-3 项目"><img src="http://placehold.it/250x250/f00" class="img-responsive"/></div><div class="col-md-3 项目"><img src="http://placehold.it/250x250/ff0" class="img-responsive"/></div><div class="col-md-6 item"><img src="http://placehold.it/500x250/000" class="img-responsive"/></div><div class="col-md-3 项目"><img src="http://placehold.it/250x250/f00" class="img-responsive"/></div><div class="col-md-3 项目"><img src="http://placehold.it/250x250/ff0" class="img-responsive"/></div></div></div>

how can I display correctly my grid without huge space, and look good?

my photo

My code:

<div class="first">
<div class="container">
    <div class="row">
        <div class="col-md-6">
            <img src="http://img.uefa.com/MultimediaFiles/Photo/competitions/General/02/35/49/87/2354987_w2.jpg" class="img-responsive"/>
        </div>

        <div class="col-md-3">
            <img src="http://img.uefa.com/MultimediaFiles/Photo/competitions/Comp_Matches/01/83/81/26/1838126_s2.jpg" class="img-responsive"/>
        </div>

        <div class="col-md-3">
            <img src="http://img.uefa.com/MultimediaFiles/Photo/competitions/Comp_Matches/02/36/89/27/2368927_s2.jpg" class="img-responsive"/>
        </div>

        <div class="col-md-6">
            <img src="http://i.telegraph.co.uk/multimedia/archive/03498/BEAU_3498448b.jpg" class="img-responsive"/>
        </div>

        <div class="col-md-3">
            <img src="http://img.uefa.com/MultimediaFiles/Photo/competitions/Comp_Matches/01/83/81/26/1838126_s2.jpg" class="img-responsive"/>
        </div>

        <div class="col-md-3">
            <img src="http://img.uefa.com/MultimediaFiles/Photo/competitions/Comp_Matches/02/36/89/27/2368927_s2.jpg" class="img-responsive"/>
        </div>
    </div>
</div>

Maybe I should use any JS script or smthing? Please help :)

解决方案

You need to clear the float added to the columns (columns have float: left applied to them by default) at the breakpoint(s) you're using (992px for col-md-*) or place your columns inside individual rows when you have a total of 12 columns.

<div classs=container>
  <div classs=row>
    <div classs=col-*-6>
    <div classs=col-*-6>
  <div><!-- EQUALS 12 COLUMNS -->
  <div classs=row>
    <div classs=col-*-6>
    <div classs=col-*-3>
    <div classs=col-*-3>
  <div><!-- EQUALS 12 COLUMNS -->
<div>

Example Using Rows

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">

  <div class="row">
    <div class="col-md-6">
      <img src="http://placehold.it/500x250/000" class="img-responsive" />
    </div>
    <div class="col-md-3">
      <img src="http://placehold.it/250x250/f00" class="img-responsive" />
    </div>
    <div class="col-md-3">
      <img src="http://placehold.it/250x250/ff0" class="img-responsive" />
    </div>
  </div>

  <div class="row">
    <div class="col-md-6">
      <img src="http://placehold.it/500x250/000" class="img-responsive" />
    </div>
    <div class="col-md-3">
      <img src="http://placehold.it/250x250/f00" class="img-responsive" />
    </div>
    <div class="col-md-3">
      <img src="http://placehold.it/250x250/ff0" class="img-responsive" />
    </div>
  </div>

  <div class="row">
    <div class="col-md-6">
      <img src="http://placehold.it/500x250/000" class="img-responsive" />
    </div>
    <div class="col-md-3">
      <img src="http://placehold.it/250x250/f00" class="img-responsive" />
    </div>
    <div class="col-md-3">
      <img src="http://placehold.it/250x250/ff0" class="img-responsive" />
    </div>
  </div>

</div>

Example Clearing the Float @ 992px yourself while only utilizing a single row for all your columns.Note: Make sure to specify these columns somehow so this doesn't disturb another part of the grid elsewhere; the example using a generic .item class to handle this but can be done in many ways.

See nth-child and clear on MDN for more info.

@media (min-width: 992px) {
  .item:nth-child(3n+1) {
    clear: left;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">

    <div class="col-md-6 item">
      <img src="http://placehold.it/500x250/000" class="img-responsive" />
    </div>

    <div class="col-md-3 item">
      <img src="http://placehold.it/250x250/f00" class="img-responsive" />
    </div>

    <div class="col-md-3 item">
      <img src="http://placehold.it/250x250/ff0" class="img-responsive" />
    </div>

    <div class="col-md-6 item">
      <img src="http://placehold.it/500x250/000" class="img-responsive" />
    </div>

    <div class="col-md-3 item">
      <img src="http://placehold.it/250x250/f00" class="img-responsive" />
    </div>

    <div class="col-md-3 item">
      <img src="http://placehold.it/250x250/ff0" class="img-responsive" />
    </div>

    <div class="col-md-6 item">
      <img src="http://placehold.it/500x250/000" class="img-responsive" />
    </div>

    <div class="col-md-3 item">
      <img src="http://placehold.it/250x250/f00" class="img-responsive" />
    </div>

    <div class="col-md-3 item">
      <img src="http://placehold.it/250x250/ff0" class="img-responsive" />
    </div>

  </div>
</div>

这篇关于引导网格未正确显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！