- 首页
- PHP
- 如何在具有 12 个网格系统的 Bootstrap 中创建 8 列?
如何在具有 12 个网格系统的 Bootstrap 中创建 8 列?
[英] How to create 8 columns in Bootstrap that has 12 grid system?
本文介绍了如何在具有 12 个网格系统的 Bootstrap 中创建 8 列?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
抱歉，我是 PHP 和 CSS 的新手...
我正在尝试更改 Evolve (WordPress) 主题以使其在首页上有 8 列，但由于该主题使用的是带有 12 网格系统的 Bootstrap，因此我无法创建 8 个偶数列.我正在更改名为 basic-functions.php 的文件，但我不知道是什么(以及我可以在哪里做 8 个偶数列).
开关( $BoxCount ):案例 $BoxCount == 8:$BoxClass = 'col-md-2';休息;默认:$BoxClass = 'col-md-3';结束开关；
我可以理解，当 $BoxClass = 'col-md-2'; 时，我将在一行中有 6 列并在另外 2 列下...
现在看起来像这样:
我怎样才能使一行 8 列?(有或没有间隙)?
解决方案
您必须编辑模板，才能生成如下内容:
<div class="col-xs-6"><div class="row"><div class="col-xs-3">1
<div class="col-xs-3">2
<div class="col-xs-3">3
<div class="col-xs-3">4
<div class="col-xs-6"><div class="row"><div class="col-xs-3">5
<div class="col-xs-3">6
<div class="col-xs-3">7
<div class="col-xs-3">8
它基本上是将 12 个网格布局切成两半，然后将这些一半做成 12 个网格布局并除以 4，最终得到 8 个网格列.你不能用你的解决方案来做到这一点，因为你不能将 12 分成 4 个相等的部分(它类似于 col-md-1,5 并且你显然不能在引导程序中做这样的事情)
来源:Twitter Bootstrap 中的 8 列
更新:这不像在某处复制粘贴此代码那么容易，您必须在许多地方修改代码.我们也许可以尝试更脏"的方法.试试这个:
将此代码粘贴到 .css 文件的末尾:
.col-8-custom{宽度:12.5%；}
并更改您最初粘贴的代码:
开关( $BoxCount ):案例 $BoxCount == 8:$BoxClass = 'col-8-custom';休息;默认:$BoxClass = 'col-md-3';结束开关；
Sorry, I am a newbie in both PHP and CSS...
I am trying to change Evolve (WordPress) theme to make it 8 columns on a frontpage but since this theme is using Bootstrap with 12 grid system, I cannot manage to create 8 even columns. I'm changing the file called basic-functions.php and I don't know what (and where can I do to have 8 even columns).
switch ( $BoxCount ):
case $BoxCount == 8:
$BoxClass = 'col-md-2';
break;
default:
$BoxClass = 'col-md-3';
endswitch;
I can understand that when the $BoxClass = 'col-md-2';, then I will have 6 columns in a row and under another 2 columns...
Now, it looks like this:
How can I make 8 columns in a row? (with or without gap)?
解决方案
You have to edit your template so you can generate something like this:
<div class="row">
<div class="col-xs-6">
<div class="row">
<div class="col-xs-3">
1
</div>
<div class="col-xs-3">
2
</div>
<div class="col-xs-3">
3
</div>
<div class="col-xs-3">
4
</div>
</div>
</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-3">
5
</div>
<div class="col-xs-3">
6
</div>
<div class="col-xs-3">
7
</div>
<div class="col-xs-3">
8
</div>
</div>
</div>
</div>
Its basically 12 grid layout cut in half, then those halfs are made 12 grid layout and divided by 4, which ultimately results in 8 grid column. You can't do it with your solution, because you cant divide 12 to become 4 equal parts (it would be something like col-md-1,5 and you obviously cant make something like this in bootstrap)
source: 8 Columns in Twitter Bootstrap
UPDATE:
It's not as easy as copypasting this code somewhere, you would have to modify the code on many places. We can maybe try more "dirty" approach. Try this:
Paste this code to the end of your .css file:
.col-8-custom{
width: 12.5%;
}
And change the code you originally pasted into:
switch ( $BoxCount ):
case $BoxCount == 8:
$BoxClass = 'col-8-custom';
break;
default:
$BoxClass = 'col-md-3';
endswitch;
这篇关于如何在具有 12 个网格系统的 Bootstrap 中创建 8 列?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
