下面的boostrap代码的工作原理与我希望在不同屏幕上使用的代码完全一样!
[基本上,当它是一个大屏幕时,我希望一行显示3个项目,而当它是一个较小的屏幕时,我希望每个项目都显示在自己的行中,并且每个项目从头到尾都在哪里。
(是!)但是,当我将警报类替换为a href
标记时,功能将中断(请参见下文)。使按钮像我想要的那样执行的最佳方法是什么?
Works
<div class='row'>
<div class='col-sm-12 col-lg-4'>
<div class='alert btn-primary' >primary alert</div>
</div>
<div class='col-sm-12 col-lg-4'>
<div class='alert btn-primary'>primary alert</div>
</div>
<div class='col-sm-12 col-lg-4'>
<div class='alert btn-primary' >primary alert</div>
</div>
</div>
不工作
<div class='row'>
<div class='col-sm-12 col-lg-4'>
<a href="/" class="alert btn-primary">Home</a>
</div>
<div class='col-sm-12 col-lg-4'>
<a href="/" class="alert btn-primary">Home</a>
</div>
<div class='col-sm-12 col-lg-4'>
<a href="/" class="alert btn-primary">Home</a>
</div>
</div>
我认为了解您要如何结构您的元素很重要:我真的不知道您要做什么,但是我想以下内容:
您想要一个网格结构(class="row"
&class="col-*"
)
您需要链接一些elements(<a></a>
)
那些element是按钮(<button></button>
)
您希望那些按钮占据父容器的整个宽度(class="w-100"
)
计算完这些约束之后,我们得到以下代码,与您最初编写的代码非常相似(是!):
<div class='row'>
<div class='col-sm-12 col-lg-4'>
<a href="/">
<button class="alert btn-primary w-100">Home</button>
</a>
</div>
<div class='col-sm-12 col-lg-4'>
<a href="/">
<button class="alert btn-primary w-100">Home</button>
</a>
</div>
<div class='col-sm-12 col-lg-4'>
<a href="/">
<button class="alert btn-primary w-100">Home</button>
</a>
</div>
</div>