如何使用bootstrap设计8个框如下?
var/run/mysqld
答案 0 :(得分:9)
我知道这个问题是关于Bootstrap的,但我认为人们只需要用html和css来完成它就会有所帮助。我讨厌看到人们努力工作以使用Bootstrap制作丑陋的解决方案,如果你没有使用Bootstrap这么基本。
HTML:
只是一张名片
<ul>
<li>
<img src="http://lorempixel.com/50/50/sports/" alt="John Doe"/>
<span class="content">
<strong>Johnny Realestate</strong>
<a href="mailto:johnny@realestate.io" title="Email Johnny">johnny@realestate.io</a>
<a href="tel:2223334444" title="Call Johnny">222.333.4444</a>
<address>
1 Real Estate Court<br>
suite 101<br>
Real, AZ 10101
</address>
</span>
</li>
... REPEAT
</ul>
CSS:
1024px及更高版本=&gt;桌面布局| = | = | = | = |
中的4个项目ul {
list-style:none;
display:flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
max-width:1024px; // should match the page width, this value is also reflected in the media queries
width:100%;
margin: 0 auto; // auto can be replaced with any value
padding: 1em 0;
background: orange;
}
ul li {
width: 100%;
margin: 0 0 1em 0;
box-shadow:0px 0px 1px 1px black;
background: white;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
ul li img {
height:50px;
width: 50px;
margin: 0 5px 0 0;
}
ul li span {
width: calc(100% - 55px);
}
@media (min-width:599px){
ul li {
width: 49%;
margin: 0 2% 1em 0;
}
}
@media (min-width:599px) and (max-width:1024px){
ul li:nth-child(2n + 2){
margin: 0 0 1em 0;
}
}
@media (min-width:1024px){
ul li {
width: 24%;
margin: 0 1.3333333333% 1em 0;
}
ul li:nth-child(4n + 4){
margin: 0 0 1em 0;
}
}
有很多方法可以优化此示例或进行调整以达到目标。我希望这会有所帮助。
<强> [UPDATE] 强>
我添加了display:flex;
和flex-wrap: wrap;
的前缀,但如果可以的话,您应该在工作流程中添加AutoPrefixer!
答案 1 :(得分:3)
我对您的问题的理解是,您希望在较小的屏幕上移除容器margin-left
和right
,以便卡片触及屏幕边缘。
下面的演示中有8行分为两行。我添加了一些padding
和margin
来平衡卡片的间距,nth-child
规则用于将其应用于正确的卡片。
如果要保留左右边距,可以只排除我的媒体查询。
.card-row {
background: lightsalmon;
}
.card .inner {
height: 100px;
padding: 10px;
background: whitesmoke;
color: grey;
box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.2);
margin: 15px 0;
}
@media screen and (max-width: 991px) {
.container {
width: 100%;
}
.card:nth-child(odd) {
background: orange;
padding-left: 0;
}
.card:nth-child(even) {
background: darkorange;
padding-right: 0;
}
}
@media screen and (max-width: 767px) {
.card:nth-child(odd), .card:nth-child(even) {
background: coral;
padding: 0;
}
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="container">
<h3>Heading</h3>
<div class="row card-row">
<div class="card col-xs-12 col-sm-6 col-md-3">
<div class="inner">
<p>hello</p>
</div>
</div>
<div class="card col-xs-12 col-sm-6 col-md-3">
<div class="inner">
<p>hello</p>
</div>
</div>
<div class="card col-xs-12 col-sm-6 col-md-3">
<div class="inner">
<p>Hello, I am beautiful content... please change me!</p>
</div>
</div>
<div class="card col-xs-12 col-sm-6 col-md-3">
<div class="inner">
<p>hello</p>
</div>
</div>
</div>
<div class="row card-row">
<div class="card col-xs-12 col-sm-6 col-md-3">
<div class="inner">
<p>hello</p>
</div>
</div>
<div class="card col-xs-12 col-sm-6 col-md-3">
<div class="inner">
<p>hello</p>
</div>
</div>
<div class="card col-xs-12 col-sm-6 col-md-3">
<div class="inner">
<p>Hello, I am beautiful content... please change me!</p>
</div>
</div>
<div class="card col-xs-12 col-sm-6 col-md-3">
<div class="inner">
<p>hello</p>
</div>
</div>
</div>
</div>
我还添加了一些background-color
- 但您可以删除它只是为了帮助您在调整浏览器大小时看到断点和更改。
答案 2 :(得分:0)
你需要在你的Div中添加col-lg-3
,如下面的代码。
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Thumbnail Gallery</h1>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a href="#" class="thumbnail">
<img alt="" src="http://placehold.it/400x300" class="img-responsive">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a href="#" class="thumbnail">
<img alt="" src="http://placehold.it/400x300" class="img-responsive">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a href="#" class="thumbnail">
<img alt="" src="http://placehold.it/400x300" class="img-responsive">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a href="#" class="thumbnail">
<img alt="" src="http://placehold.it/400x300" class="img-responsive">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a href="#" class="thumbnail">
<img alt="" src="http://placehold.it/400x300" class="img-responsive">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a href="#" class="thumbnail">
<img alt="" src="http://placehold.it/400x300" class="img-responsive">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a href="#" class="thumbnail">
<img alt="" src="http://placehold.it/400x300" class="img-responsive">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a href="#" class="thumbnail">
<img alt="" src="http://placehold.it/400x300" class="img-responsive">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a href="#" class="thumbnail">
<img alt="" src="http://placehold.it/400x300" class="img-responsive">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a href="#" class="thumbnail">
<img alt="" src="http://placehold.it/400x300" class="img-responsive">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a href="#" class="thumbnail">
<img alt="" src="http://placehold.it/400x300" class="img-responsive">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a href="#" class="thumbnail">
<img alt="" src="http://placehold.it/400x300" class="img-responsive">
</a>
</div>
</div>
</div>
或参见下面的链接
http://ironsummitmedia.github.io/startbootstrap-thumbnail-gallery/
答案 3 :(得分:0)
使用以下标记
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-6 col-lg-3">
<div style="border-style: solid; padding: 1%;">
<div class="row">
<div class="col-xs-6">
<h4>Title</h4>
<p>Name</p>
<p>Family</p>
<p>
Description
</p>
</div>
<div class="col-xs-6">
<img class="img-responsive" src="www.example.com/photo">
</div>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-3">
<div style="border-style: solid; padding: 1%;">
<div class="row">
<div class="col-xs-6">
<h4>Title</h4>
<p>Name</p>
<p>Family</p>
<p>
Description
</p>
</div>
<div class="col-xs-6">
<img class="img-responsive" src="www.example.com/photo">
</div>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-3">
<div style="border-style: solid; padding: 1%;">
<div class="row">
<div class="col-xs-6">
<h4>Title</h4>
<p>Name</p>
<p>Family</p>
<p>
Description
</p>
</div>
<div class="col-xs-6">
<img class="img-responsive" src="www.example.com/photo">
</div>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-3">
<div style="border-style: solid; padding: 1%;">
<div class="row">
<div class="col-xs-6">
<h4>Title</h4>
<p>Name</p>
<p>Family</p>
<p>
Description
</p>
</div>
<div class="col-xs-6">
<img class="img-responsive" src="www.example.com/photo">
</div>
</div>
</div>
</div>
</div>
<div class="row" >
<div class="col-sm-12 col-md-6 col-lg-3">
<div style="border-style: solid; padding: 1%; ">
<div class="row">
<div class="col-xs-6">
<h4>Title</h4>
<p>Name</p>
<p>Family</p>
<p>
Description
</p>
</div>
<div class="col-xs-6">
<img class="img-responsive" src="www.example.com/photo">
</div>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-3">
<div style="border-style: solid; padding: 1%;">
<div class="row">
<div class="col-xs-6">
<h4>Title</h4>
<p>Name</p>
<p>Family</p>
<p>
Description
</p>
</div>
<div class="col-xs-6">
<img class="img-responsive" src="www.example.com/photo">
</div>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-3">
<div style="border-style: solid; padding: 1%;">
<div class="row">
<div class="col-xs-6">
<h4>Title</h4>
<p>Name</p>
<p>Family</p>
<p>
Description
</p>
</div>
<div class="col-xs-6">
<img class="img-responsive" src="www.example.com/photo">
</div>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-3">
<div style="border-style: solid; padding: 1%;">
<div class="row">
<div class="col-xs-6">
<h4>Title</h4>
<p>Name</p>
<p>Family</p>
<p>
Description
</p>
</div>
<div class="col-xs-6">
<img class="img-responsive" src="www.example.com/photo">
</div>
</div>
</div>
</div>
</div>
</div>
答案 4 :(得分:0)
你可以使用一个简单的方法是使用clear:连续每4个元素之后的两个概念
waitOn:function(){
Accounts.loginServicesConfigured();
}
答案 5 :(得分:0)
尝试使用以下代码:Demo
使用背景颜色类更新链接演示
<强> HTML:强>
<div class="container-fluid">
<div class="row pb10">
<div class="col-md-3 mt20">
<div class="card">
<div class="col-md-7">
<h4>Title</h4>
<p>Name</p>
<p>Family</p>
</div>
<div class="col-md-5 pt5">
<img class="img-responsive" src="http://placehold.it/150x150">
</div>
<div class="col-md-12">
<p class="desc">
Description
</p>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="col-md-3 mt20">
<div class="card">
<div class="col-md-7">
<h4>Title</h4>
<p>Name</p>
<p>Family</p>
</div>
<div class="col-md-5 pt5">
<img class="img-responsive" src="http://placehold.it/150x150">
</div>
<div class="col-md-12">
<p class="desc">
Description
</p>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="col-md-3 mt20">
<div class="card">
<div class="col-md-7">
<h4>Title</h4>
<p>Name</p>
<p>Family</p>
</div>
<div class="col-md-5 pt5">
<img class="img-responsive" src="http://placehold.it/150x150">
</div>
<div class="col-md-12">
<p class="desc">
Description
</p>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="col-md-3 mt20">
<div class="card">
<div class="col-md-7">
<h4>Title</h4>
<p>Name</p>
<p>Family</p>
</div>
<div class="col-md-5 pt5">
<img class="img-responsive" src="http://placehold.it/150x150">
</div>
<div class="col-md-12">
<p class="desc">
Description
</p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3 mt20">
<div class="card">
<div class="col-md-7">
<h4>Title</h4>
<p>Name</p>
<p>Family</p>
</div>
<div class="col-md-5 pt5">
<img class="img-responsive" src="http://placehold.it/150x150">
</div>
<div class="col-md-12">
<p class="desc">
Description
</p>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="col-md-3 mt20">
<div class="card">
<div class="col-md-7">
<h4>Title</h4>
<p>Name</p>
<p>Family</p>
</div>
<div class="col-md-5 pt5">
<img class="img-responsive" src="http://placehold.it/150x150">
</div>
<div class="col-md-12">
<p class="desc">
Description
</p>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="col-md-3 mt20">
<div class="card">
<div class="col-md-7">
<h4>Title</h4>
<p>Name</p>
<p>Family</p>
</div>
<div class="col-md-5 pt5">
<img class="img-responsive" src="http://placehold.it/150x150">
</div>
<div class="col-md-12">
<p class="desc">
Description
</p>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="col-md-3 mt20">
<div class="card">
<div class="col-md-7">
<h4>Title</h4>
<p>Name</p>
<p>Family</p>
</div>
<div class="col-md-5 pt5">
<img class="img-responsive" src="http://placehold.it/150x150">
</div>
<div class="col-md-12">
<p class="desc">
Description
</p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
<强> CSS:强>
.card {
border: 1px solid #333;
padding:1%;
}
.mt20 {
margin-top: 20px;
}
.pt5 {
padding-top:8px;
}
.pb10 {
padding-bottom:10px;
}
.desc {
border-top: 1px solid #999;
padding-top: 10px;
margin-top: 10px;
}
答案 6 :(得分:0)
假设您使用的是bootstrap: -
<div class="row">
<div class="col-md-12">
<div class="col-md-3">
hello
</div>
<div class="col-md-3">
hello
</div>
<div class="col-md-3">
hello
</div>
<div class="col-md-3">
hello
</div>
</div>
</div>
<!--second row-->
<div class="row">
<div class="col-md-12">
<div class="col-md-3">
hello
</div>
<div class="col-md-3">
hello
</div>
<div class="col-md-3">
hello
</div>
<div class="col-md-3">
hello
</div>
</div>
</div>
答案 7 :(得分:0)
使用以下标记:
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
<div class="card">Text</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
<div class="card">Text</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
<div class="card">Text</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
<div class="card">Text</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
<div class="card">Text</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
<div class="card">Text</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
<div class="card">Text</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
<div class="card">Text</div>
</div>
</div>
</div>
的CSS:
.container-fluid{
overflow: hidden;
}
.row{margin: 0 -30px;}
.card{
border: 1px solid red;
margin: 15px 0;
padding: 15px;
background: #f0f0f0;
}
答案 8 :(得分:0)
这个可能有帮助
<强> HTML 强>
<div class="container-fluid">
<div class="col-md-3 col-sm-6 col-xs-12">
<img class="img-responsive" src="www.example.com/photo">
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<img class="img-responsive" src="www.example.com/photo">
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<img class="img-responsive" src="www.example.com/photo">
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<img class="img-responsive" src="www.example.com/photo">
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<img class="img-responsive" src="www.example.com/photo">
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<img class="img-responsive" src="www.example.com/photo">
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<img class="img-responsive" src="www.example.com/photo">
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<img class="img-responsive" src="www.example.com/photo">
</div>
</div>
答案 9 :(得分:0)
这个可能有帮助
<强> HTML 强>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="col-md-3 col-sm-6 col-xs-12">
<img class="img-responsive" src="http://www.hutchhouse.com/wp-content/uploads/2013/08/whats-changed-in-boostrap.jpg">
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<img class="img-responsive" src="http://www.hutchhouse.com/wp-content/uploads/2013/08/whats-changed-in-boostrap.jpg">
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<img class="img-responsive" src="http://www.hutchhouse.com/wp-content/uploads/2013/08/whats-changed-in-boostrap.jpg">
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<img class="img-responsive" src="http://www.hutchhouse.com/wp-content/uploads/2013/08/whats-changed-in-boostrap.jpg">
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<img class="img-responsive" src="http://www.hutchhouse.com/wp-content/uploads/2013/08/whats-changed-in-boostrap.jpg">
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<img class="img-responsive" src="http://www.hutchhouse.com/wp-content/uploads/2013/08/whats-changed-in-boostrap.jpg">
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<img class="img-responsive" src="http://www.hutchhouse.com/wp-content/uploads/2013/08/whats-changed-in-boostrap.jpg">
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<img class="img-responsive" src="http://www.hutchhouse.com/wp-content/uploads/2013/08/whats-changed-in-boostrap.jpg">
</div>
</div>
&#13;