Bootstrap 列中的列

Question

我正在设计一个模板来显示产品图片[i] 和描述[d]，如下所示使用推特 bootstrap 3（我无法将图片和描述放在一起，它们一直在跳周围有不同的屏幕尺寸）

要求：

1) 对于大号和中号，它将是 2 列

|             |
|[i][d] [i][d]|
|[i][d] [i][d]|
|[i][d]       |
|             |

2) 对于 SMALL，它就像 1 列（描述仍然需要放在一边）

|        |
| [i][d] |
| [i][d] |
| [i][d] |
| [i][d] |
| [i][d] |
|        |

3) 对于特小号，它将像 1 列，但描述将遵循图像

|   |
|[i]|
|[d]|
|[i]|
|[d]|
|[i]|
|[d]|
|[i]|
|[d]|
|[i]|
|[d]|
|   |

问题：

我在小屏幕上遇到问题，因为我在 [i] 和 [d]

之间得到了很多 space

|[i]  [d]|
|[i]  [d]|
|[i]  [d]|
|[i]  [d]|
|[i]  [d]|

同样在某些屏幕尺寸（中等和小之间）下，一行图像本身会粘在先前描述的底部

|[i]  [d]|
|     [i]|
|[d]  [i]|
|[d]     |

代码：

我正在尝试使用以下 HTML 代码

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>2 Col Portfolio - Start Bootstrap Template</title>

    <!-- Bootstrap Core CSS -->
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="css/style.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body>

    <!-- Navigation -->
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Start Bootstrap</a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li>
                        <a href="#">About</a>
                    </li>
                    <li>
                        <a href="#">Services</a>
                    </li>
                    <li>
                        <a href="#">Contact</a>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>

    <!-- Page Content -->
    <div class="container">

        <!-- Page Header -->
        <div class="row">
            <div class="col-lg-12">
                <h1 class="page-header">Page Heading
                    <small>Secondary Text</small>
                </h1>
            </div>
        </div>
        <!-- /.row -->

        <!-- Project Row -->
        <div class="row">
            <div class="col-lg-6"> 
                <div class="col-xs-6 col-sm-3 col-md-4">
                    <a href="#">
                        <img class="img-responsive" src="http://placehold.it/140x200" alt="">
                    </a>
                </div>
                <div class="col-xs-6 col-sm-6 col-md-8">
                    <h3>Project One</h3>
                    <h4>Subheading</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
                    <a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a>
                </div>
            </div>
            <div class="col-lg-6"> <!--I want this to behave like two rows, at small screen at some size image sticks itself at the bottom of previous View Project button-->
                <div class="col-xs-6 col-sm-3 col-md-4">
                    <a href="#">
                        <img class="img-responsive" src="http://placehold.it/140x200" alt="">
                    </a>
                </div>
                <div class="col-xs-6 col-sm-6 col-md-8">
                    <h3>Project One</h3>
                    <h4>Subheading</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
                    <a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a>
                </div>
            </div>
        </div>
        <!-- /.row -->
        <!-- Project Row -->
        <div class="row">
            <div class="col-lg-6"> 
                <div class="col-xs-6 col-sm-3 col-md-4">
                    <a href="#">
                        <img class="img-responsive" src="http://placehold.it/140x200" alt="">
                    </a>
                </div>
                <div class="col-xs-6 col-sm-6 col-md-8">
                    <h3>Project One</h3>
                    <h4>Subheading</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
                    <a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a>
                </div>
            </div>
        </div>
        <!-- /.row -->

        <hr>

        <!-- Pagination -->
        <div class="row text-center">
            <div class="col-lg-12">
                <ul class="pagination">
                    <li>
                        <a href="#">&laquo;</a>
                    </li>
                    <li class="active">
                        <a href="#">1</a>
                    </li>
                    <li>
                        <a href="#">2</a>
                    </li>
                    <li>
                        <a href="#">3</a>
                    </li>
                    <li>
                        <a href="#">4</a>
                    </li>
                    <li>
                        <a href="#">5</a>
                    </li>
                    <li>
                        <a href="#">&raquo;</a>
                    </li>
                </ul>
            </div>
        </div>
        <!-- /.row -->

        <hr>

        <!-- Footer -->
        <footer>
            <div class="row">
                <div class="col-lg-12">
                    <p>Copyright &copy; Your Website 2014</p>
                </div>
            </div>
            <!-- /.row -->
        </footer>

    </div>
    <!-- /.container -->

    <!-- jQuery not used yet-->
    <script src="js/jquery.js"></script>
    -->
    <!-- Bootstrap Core JavaScript -->
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

</body>

</html>

以下是自定义的style.css以防万一

body {
    padding-top: 70px; /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}

.portfolio-item {
    margin-bottom: 25px;
}

footer {
    margin: 50px 0;
}

h3 {
    margin-top:0;
}

谢谢

Answer 1

看起来您在指定列时需要更明确一点。您可能可以通过在行 div 的直接子级上指定列宽来获得所需的内容。

<div class="row">
   <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"> 
      <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
          <!-- Image Content -->
      </div>
      <div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">
          <!-- Description -->
      </div>
   </div>
</div>

我做了一个Bootply作为例子

Answer 2

几个问题：

您没有正确嵌套您的列，最初回答问题的人也没有。重新阅读文档并查看示例。当您将列嵌套在列中时，您必须嵌套行并使用相同的结构 .row .col- .row .col-
在 .page-header 和 .pagination 和 .footer 的情况下不必要地使用 col-X-12。如果某些内容总是全角，请不要使用网格系统。这在文档中。
img-responsive 使图像不会超过它们的自然宽度，但是 Bootstrap 网格是流动的，所以在任何给定的视口宽度下都会有很大的间隙，除非你使用更大的图像来补偿.
任何给定断点处的每 12 列都需要 .clearfix 使用响应实用程序 class 或新的 .row.

演示版：https://jsbin.com/kubele

移动第一基础知识：

col-sm = viewports 768px 及以上所以如果某些东西是 col-sm-4 那是一样的 col-md-4 和 col-lg-4 以及 UNDER 这将是全宽。

col-md = viewports 992px 及以上所以如果某些东西是 col-md-8 它与 col-lg-8 和 UNDER 将是全宽。

col-lg = viewports 1200px 及以上所以如果是 col-lg-8 任何东西都将是全宽。

col-xs = 涵盖从 0 开始的所有视口大小。

CSS:

注意：大多数人都认为767px对于很多小视口的情况来说是一个很高的断点，要根据具体情况解决这个问题，而不是写废话加载更多代码，使用 classes .col-xs-*，然后在最大宽度处使用 CSS 以使列变为全宽。 Bootstrap 缺少垂直 space 除非您将 .btn 包裹在 <p> 中，就像您将在其网站上找到的所有示例一样，您还会注意到旁边缺少图像由于开箱即用的边距未对齐的文本，已更正。

body {
    padding-top: 70px
}
.row.project-row > [class*="col-"] {
    margin-bottom: 2%
}
@media (max-width:380px) { 
    .row.project-row  [class*="col-"] {
        width: 100%
    }
}
@media (min-width:381px) { 
    .project-title {
        margin-top: 0
    }
}

HTML:

<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
   <div class="container">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
         <span class="sr-only">Toggle navigation</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         </button>
         <a class="navbar-brand" href="#">Start Bootstrap</a>
      </div>
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
         <ul class="nav navbar-nav">
            <li>
               <a href="#">About</a>
            </li>
            <li>
               <a href="#">Services</a>
            </li>
            <li>
               <a href="#">Contact</a>
            </li>
         </ul>
      </div>
      <!-- /.navbar-collapse -->
   </div>
   <!-- /.container -->
</nav>
<!-- Page Content -->
<div class="container">
   <!-- Page Header -->
   <h1 class="page-header">Page Heading
      <small>Secondary Text</small>
   </h1>
   <!-- Project Row -->
   <div class="row project-row">
      <!-- BEGIN grouping -->
      <div class="col-md-6">
         <div class="row">
            <div class="col-sm-4 col-xs-4">
               <a href="#">
               <img class="img-responsive center-block" src="http://placehold.it/300x400" alt="">
               </a>
            </div>
            <!-- /.col-sm-4 col-xs-4 -->
            <div class="col-sm-8 col-xs-8">
               <h3 class="project-title">Project One</h3>
               <h4>Subheading</h4>
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
               <p> <a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a> </p>
            </div>
            <!-- /.col-sm-8 col-xs-8 -->
         </div>
         <!-- /.row (nested) -->
      </div>
      <!-- /.col-md-6 -->
      <!-- END grouping -->
      <!-- BEGIN grouping -->
      <div class="col-md-6">
         <div class="row">
            <div class="col-sm-4 col-xs-4">
               <a href="#">
               <img class="img-responsive center-block" src="http://placehold.it/300x400" alt="">
               </a>
            </div>
            <!-- /.col-sm-4 col-xs-4 -->
            <div class="col-sm-8 col-xs-8">
               <h3 class="project-title">Project One</h3>
               <h4>Subheading</h4>
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
               <p> <a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a> </p>
            </div>
            <!-- /.col-sm-8 col-xs-8 -->
         </div>
         <!-- /.row (nested) -->
      </div>
      <!-- /.col-md-6 -->
      <!-- END grouping -->
      <!-- after every 12 columns put a clearfix or use a script because it's unlikely that all the boxes are the same height -->
      <div class="clearfix hidden-sm"></div>
      <!-- BEGIN grouping -->
      <div class="col-md-6">
         <div class="row">
            <div class="col-sm-4 col-xs-4">
               <a href="#">
               <img class="img-responsive center-block" src="http://placehold.it/300x400" alt="">
               </a>
            </div>
            <!-- /.col-sm-4 col-xs-4 -->
            <div class="col-sm-8 col-xs-8">
               <h3 class="project-title">Project One</h3>
               <h4>Subheading</h4>
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
               <p> <a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a> </p>
            </div>
            <!-- /.col-sm-8 col-xs-8 -->
         </div>
         <!-- /.row (nested) -->
      </div>
      <!-- /.col-md-6 -->
      <!-- END grouping -->          
      <!-- BEGIN grouping -->
      <div class="col-md-6">
         <div class="row">
            <div class="col-sm-4 col-xs-4">
               <a href="#">
               <img class="img-responsive center-block" src="http://placehold.it/300x400" alt="">
               </a>
            </div>
            <!-- /.col-sm-4 col-xs-4 -->
            <div class="col-sm-8 col-xs-8">
               <h3 class="project-title">Project One</h3>
               <h4>Subheading</h4>
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
               <p> <a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a> </p>
            </div>
            <!-- /.col-sm-8 col-xs-8 -->
         </div>
         <!-- /.row (nested) -->
      </div>
      <!-- /.col-md-6 -->
      <!-- END grouping -->          
      <!-- after every 12 columns put a clearfix or use a script because it's unlikely that all the boxes are the same height -->
      <div class="clearfix hidden-sm"></div>
   </div>
   <!-- /.row -->
   <hr>
   <!-- Pagination -->
   <div class="text-center">
      <ul class="pagination">
         <li>
            <a href="#">&laquo;</a>
         </li>
         <li class="active">
            <a href="#">1</a>
         </li>
         <li>
            <a href="#">2</a>
         </li>
         <li>
            <a href="#">3</a>
         </li>
         <li>
            <a href="#">4</a>
         </li>
         <li>
            <a href="#">5</a>
         </li>
         <li>
            <a href="#">&raquo;</a>
         </li>
      </ul>
   </div>
   <hr>
   <!-- Footer -->
   <footer>
      <p>Copyright &copy; Your Website 2014</p>
   </footer>
</div>
<!-- /.container -->

Bootstrap 列中的列

Bootstrap columns in column

twitter-bootstrap-3

演示版：https://jsbin.com/kubele