Bootstrap 6 列响应式
[英] Bootstrap 6 columns Responsive
本文介绍了Bootstrap 6 列响应式的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想要 6 列响应，我创建了这个 html 但不是很好，也许有人可以给我正确的结构和 css.这里的问题是当我尝试调整窗口大小时，图标和文本没有调整大小.
HTML
<div class="row"><div class="header-block col-xs-12"><div class="block1 col-xs-2"><a href="{{store%20direct_url="><span><strong>100% fornøyd</strong>Vårt mål!</span></a>
<div class="block2 col-xs-2"><a href="{{store%20direct_url="><span><strong>Rask 杠杆</strong>更大的啤酒！</span></a>
<div class="block3 col-xs-2"><a href="{{store%20direct_url="><span><strong>Serviceverksted</strong>最小漂移！</span></a>
<div class="block4 col-xs-2"><a href="{{store%20direct_url="><span><strong>Kataloger</strong>Se våre produkter!</span></a>
<div class="block6 col-xs-2"><a href="{{store%20direct_url="><span><strong>Finansiering</strong>Fleksible løsninger!</span></a>
<div class="block5 col-xs-2"><a href="https://www.facebook.com/diaproff/" target="_blank"><span><strong>Hold kontakten</strong>Følg oss på facebook!</span></a>
CSS:
.header-block >div {向左飘浮;位置:相对；右边距:10px；填充:5px 10px；最大宽度:224px；}.header-block 跨度 {显示:内联块；字体大小:16px；行高:20px；文本转换:大写；左边距:48px；颜色:#262626；}.header-block 强 {显示:块；}.header-block >div:之前{字体大小:42px；行高:42px；颜色:#faa641；位置:绝对；左:10px；顶部:5px；}.header-block .block1:before {内容:'\f087';}.header-block .block2:before {内容:'\f0d1';}.header-block .block3:before {内容:'\f021';}.header-block .block4:before {内容:'\f07c';}.header-block .block5:before {内容:'\f082';}.header-block .block6:before {内容:'\f0d6';}
解决方案
您的 html 有误.Cols 应该总是在一行内.此外，如果您修改 col 填充或其边距，您将破坏引导程序.如果你想接触它，你必须通过源(less 或 sass)来完成.因此，您添加到 cols 的块类肯定会破坏引导程序.
<div class="row"><div class="col-xs-12">任何你想要的整行</div><div class="col-xs-2">1</div><div class="col-xs-2">2</div><div class="col-xs-2">3</div><div class="col-xs-2">4</div><div class="col-xs-2">5</div><div class="col-xs-2">6</div>
这(上面)会给你 6 列响应.如果要嵌套列:
<div class="row"><div class="col-xs-12"><div class="row"><div class="col-xs-2">1</div><div class="col-xs-2">2</div><div class="col-xs-2">3</div><div class="col-xs-2">4</div><div class="col-xs-2">5</div><div class="col-xs-2">6</div>
如果您需要每个 col 内容都有填充，则必须将填充应用于子 div:
<代码>...<div class="col-xs-2"><div class="some-padding">此内容将具有填充并且不会破坏引导程序
I want to have 6 columns responsive, I create this html but is not so good, maybe someone can give me the correct structure and css. The issue here is when I try to resize the window the icon and text is not resize it.
HTML
<div class="container">
<div class="row">
<div class="header-block col-xs-12">
<div class="block1 col-xs-2">
<a href="{{store%20direct_url="><span><strong>100% fornøyd</strong>Vårt mål!</span></a>
</div>
<div class="block2 col-xs-2">
<a href="{{store%20direct_url="><span><strong>Rask levering</strong>stort lager!</span></a>
</div>
<div class="block3 col-xs-2">
<a href="{{store%20direct_url="><span><strong>Serviceverksted</strong>Minimal driftstans!</span></a>
</div>
<div class="block4 col-xs-2">
<a href="{{store%20direct_url="><span><strong>Kataloger</strong>Se våre produkter!</span></a>
</div>
<div class="block6 col-xs-2">
<a href="{{store%20direct_url="><span><strong>Finansiering</strong>Fleksible løsninger!</span></a>
</div>
<div class="block5 col-xs-2">
<a href="https://www.facebook.com/diaproff/" target="_blank"><span><strong>Hold kontakten</strong>Følg oss på facebook!</span></a>
</div>
</div>
</div>
</div>
CSS:
.header-block > div {
float: left;
position: relative;
margin-right: 10px;
padding: 5px 10px;
max-width: 224px;
}
.header-block span {
display: inline-block;
font-size: 16px;
line-height: 20px;
text-transform: uppercase;
padding-left: 48px;
color: #262626;
}
.header-block strong {
display: block;
}
.header-block > div:before {
font-size: 42px;
line-height: 42px;
color: #faa641;
position: absolute;
left: 10px;
top: 5px;
}
.header-block .block1:before {
content: '\f087';
}
.header-block .block2:before {
content: '\f0d1';
}
.header-block .block3:before {
content: '\f021';
}
.header-block .block4:before {
content: '\f07c';
}
.header-block .block5:before {
content: '\f082';
}
.header-block .block6:before {
content: '\f0d6';
}
解决方案
Your html is wrong. Cols should always be inside a row. Also, if you modify a col padding or its margins, you will break bootstrap. If you want to touch that you have to do it via the source (less or sass). So that block classes you are adding to the cols, will for sure break bootstrap.
<div class="container">
<div class="row">
<div class="col-xs-12">Whatever you want full row</div>
<div class="col-xs-2">1</div>
<div class="col-xs-2">2</div>
<div class="col-xs-2">3</div>
<div class="col-xs-2">4</div>
<div class="col-xs-2">5</div>
<div class="col-xs-2">6</div>
</div>
</div>
This (above) will give you 6 cols responsive. If you want to nest columns:
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="row">
<div class="col-xs-2">1</div>
<div class="col-xs-2">2</div>
<div class="col-xs-2">3</div>
<div class="col-xs-2">4</div>
<div class="col-xs-2">5</div>
<div class="col-xs-2">6</div>
</div>
</div>
</div>
</div>
If you need each col content to have padding you will have to apply the padding to a child div:
...
<div class="col-xs-2">
<div class="some-padding">
this content will have padding and not break bootstrap
</div>
</div>
这篇关于Bootstrap 6 列响应式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
