DEMO：https://jsbin.com/kubele

Question

我正在设计一个模板，使用twitter bootstrap 3显示产品图像[i]和描述[d]如下（事情是我无法将图像和描述保持在一起，他们不断浏览不同的屏幕大小）

需要量：

1）对于LARGE和MEDIUM，它将是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）对于EXTRA SMALL，它将像1列，但描述将遵循图像

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

问题：

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

之间占用了很多空间

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

此外，在某些屏幕尺寸（介于中等和较小之间）的情况下，一行的图像会将其自身粘在前面描述的底部

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

CODE：

我正在尝试以下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-
在col-X-12以及.page-header和.pagination的情况下，不必要地使用.footer。如果某些内容始终是全宽的，请不要使用网格系统。这是在文档中。
img-responsive使图像不会超过其自然宽度，但Bootstrap网格是流动的，因此在任何给定的视口宽度下，除非使用较大的图像进行补偿，否则会有很大的间隙。
任何给定断点处的每12列都需要.clearfix使用响应实用程序类或新.row。

DEMO：https://jsbin.com/kubele

移动优先基础：

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

col-md = viewports 992px up up所以如果有什么东西是col-md-8它就像 col-lg-8和UNDER将是全宽的。

col-lg = viewports 1200px up up如果有什么东西是col-lg-8，那么下面的任何东西都是全宽的。

col-xs =涵盖0及以上的所有视口大小。

<强> CSS：

注意：大多数人都认为767px是很多小视口情况的一个非常高的断点，要根据具体情况来解决这个问题，而不是写一个垃圾加载更多的代码，类{{1使用了，然后在最大宽度使用CSS使列成为全宽。 Bootstrap缺少垂直空间，除非您将.col-xs-*包裹在.btn中，就像您在其网站上找到的所有示例一样，并且您还会注意到文本旁边缺少图像，因为边距不是＆＃ 39; t开箱即用，这已得到纠正。

<p>

<强> HTML：

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
    }
}

列中的Bootstrap列

2 个答案:

DEMO：https://jsbin.com/kubele