我正在设计一个模板,使用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="#">«</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="#">»</a>
</li>
</ul>
</div>
</div>
<!-- /.row -->
<hr>
<!-- Footer -->
<footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright © 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;
}
由于
答案 0 :(得分: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为例。
答案 1 :(得分:1)
有几个问题:
您没有正确嵌套列,最初也没有回答问题的人。重新阅读文档并查看示例。在列中嵌入列时,必须嵌套行并使用相同的结构.row .col- .row .col-
在col-X-12
以及.page-header
和.pagination
的情况下,不必要地使用.footer
。如果某些内容始终是全宽的,请不要使用网格系统。这是在文档中。
img-responsive使图像不会超过其自然宽度,但Bootstrap网格是流动的,因此在任何给定的视口宽度下,除非使用较大的图像进行补偿,否则会有很大的间隙。
任何给定断点处的每12列都需要.clearfix
使用响应实用程序类或新.row
。
移动优先基础:
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
}
}