需要设计8行两行 [英] Need to design 8 boxes in two rows
本文介绍了需要设计8行两行的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何使用bootstrap设计如下8个框？
- 请忽略颜色，每个框会类似于访问卡。
- 每行只能包含8行。
- 在大屏幕中向右和向左放置<和在小屏幕中没有
保证金。所以在平板电脑应该是2和在移动
版本只有每行1。还需要确保框的大小是
，所有大小都相同。
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.iotitle =Email Johnny> johnny@realestate.io< / a>
< a href =tel：2223334444title =Call Johnny> 222.333.4444< / a>
< address>
1房地产法院< br>
suite 101< br>
Real，AZ 10101
< / address>
< / span>
< / li>
... REPEAT
< / ul>
CSS：
- 移动优先
- display：flex;
- 0到599px => mobile layout | = | 1个项目
- 599px至1024px =>平板电脑版面配置| = | = | 2个项目
-
1024px及更大=>桌面版面设计| = | = | = | = | 4个项目
ul {
list-style：none;
display：flex;
-webkit-flex-wrap：wrap;
-ms-flex-wrap：wrap;
flex-wrap：wrap;
max-width：1024px; //应该匹配页面宽度，这个值也反映在媒体查询中
width：100％;
margin：0 auto; // auto可以用任何值替换
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]
我添加了 / code>和 flex-wrap：wrap; ，但如果可以，您应该添加 AutoPrefixer 到您的工作流程！
How to design 8 boxes like following using bootstrap?
- Please ignore the colors each box would be similar to a visit card.
- They should only be 8 boxes in two rows.
- With specific margins to the right and left in big screens and no margin in small screens. So in tablet should be 2 and in mobile version only 1 per row. Also need to make sure the size of boxes are all in the same size.
<div class="container-fluid">
<div style="border-style: solid;padding:1%;" class="col-md-2 col-md-offset-1">
<div class="row">
<div class="col-md-7">
<h4>Title</h4>
<p>Name</p>
<p>Family</p>
</div>
<div class="col-md-5">
<img class="img-responsive" src="www.example.com/photo">
</div>
</div>
<div class="row">
<p>
Description
</p>
</div>
</div>
<div style="border-style: solid;padding:1%" class="col-md-2">
<div class="row">
<div class="col-md-7">
<h4>Title</h4>
<p>Name</p>
<p>Family</p>
</div>
<div class="col-md-5">
<img class="img-responsive" src="www.example.com/photo">
</div>
</div>
<div class="row">
<p>
Description
</p>
</div>
</div>
<div style="border-style: solid;padding:1%" class="col-md-2">
<div class="row">
<div class="col-md-7">
<h4>Title</h4>
<p>Name</p>
<p>Family</p>
</div>
<div class="col-md-5">
<img class="img-responsive" src="www.example.com/photo">
</div>
</div>
<div class="row">
<p>
Description
</p>
</div>
</div>
<div style="border-style: solid;padding:1%" class="col-md-2">
<div class="row">
<div class="col-md-7">
<h4>Title</h4>
<p>Name</p>
<p>Family</p>
</div>
<div class="col-md-5">
<img class="img-responsive" src="www.example.com/photo">
</div>
</div>
<div class="row">
<p>
Description
</p>
</div>
</div>
</div>
解决方案
I know the question was about Bootstrap, but I thought it would be helpful for people to see it done with just html and css. I hate seeing people work real hard to make ugly solutions with Bootstrap, when this so basic if you didn't use Bootstrap.
HTML:
just a list of business cards
<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:
- mobile first
- display:flex;
- 0 to 599px => mobile layout |=| 1 item across
- 599px to 1024px => tablet layout |=|=| 2 items across
1024px and greater => desktop layout |=|=|=|=| 4 items across
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; } }
There are lots of ways to optimize this example or tweak it to reach your goals. I hope this helps.
[UPDATE]
I added the prefixes for display:flex; and flex-wrap: wrap;, but if you can, you should add AutoPrefixer to your workflow!
这篇关于需要设计8行两行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
