在bootstrap中使这个响应的最佳方法是什么？
所以我有一个布局，我希望根据设备在bootstrap中做出响应。我想知道的是我如何以图像中显示的方式执行它。我曾尝试使用表格单元格和引导列/行，但无济于事。
我希望上面的元素可用性和链接1落在单词的左侧。我怎么能这样做？
这是我的HTML和CSS：
<div class="col-md-12" style="border:black solid 1px;">
<div class="row vertical-align">
<div class="col-sm-2">
<div class="row">
<div style="padding:5px;" class="col-xs-4">
<input style="margin:40px 0 0;" class="form-inline form-control" type="checkbox" />
</div>
<div class="col-xs-8">
<img class="img-responsive" src="https://img-new.cgtrader.com/items/109741/84b639735c/human-stylized-head-bust-base-3d-model-ztl.jpg" />
</div>
</div>
</div>
<div class="col-sm-3">
<div class="row">
<div class="col-xs-12">
<div><strong>Name：</strong>Bob</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div><strong>Agency：</strong>AFDM</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="row">
<div class="col-xs-12">
<div><strong>Stack：</strong>ADCM</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div><strong>Grade：</strong>C</div>
</div>
</div>
</div>
<div class="col-sm-1">
<div class="row">
<div class="col-xs-12">
<div class="led-red-trans"></div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<strong>Available</strong>
</div>
</div>
</div>
<div class="col-sm-1">
<div class="row">
<div class="col-xs-12">
<span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<strong>Link</strong>
</div>
</div>
</div>
<div class="col-sm-2">
<div class="row">
<div class="col-xs-12">
<a data-toggle="collapse" href="#collapseme"><span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span></a>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<strong>More</strong>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div id="collapseme" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">One</li>
<li class="list-group-item">Two</li>
<li class="list-group-item">Three</li>
</ul>
</div>
</div>
</div>
</div>
CSS：
.vertical-align {
display: flex;
align-items: center;
}
.led-red-trans {
margin: 0 auto;
width: 24px;
height: 24px;
background-color: #F00;
border-radius: 50%;
box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 12px;
}
/* Large Devices, Wide Screens */
@media (min-width : 1200px) {
.vertical-align {
display: flex;
align-items: center;
}
}
/* Medium Devices, Desktops */
@media (min-width : 992px) and (max-width : 1199px) {
.vertical-align {
display: flex;
align-items: center;
}
}
/* Small Devices, Tablets */
@media (max-width : 768px) and (max-width : 991px) {
.vertical-align {
display: flex;
align-items: center;
}
}
/* Extra Small Devices, Phones */
@media (max-width : 767px) {
.vertical-align {
display: block;
align-items: center;
}
}
/* Custom, iPhone Retina */
@media (max-width : 480px) {
.vertical-align {
display: block;
align-items: center;
}
}
还有一个CODEPEN： http://codepen.io/nilerafter24/pen/VPYpqq
3 个答案:
答案 0 :(得分：2)
这将帮助您了解纯引导类的方法。
<div class="col-md-12" style="border:black solid 1px;">
<div class="row vertical-align">
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<div class="row">
<div style="padding:5px;" class="col-xs-4">
<input style="margin:40px 0 0;" class="form-inline form-control" type="checkbox" />
</div>
<div class="col-xs-8">
<img class="img-responsive" src="https://img-new.cgtrader.com/items/109741/84b639735c/human-stylized-head-bust-base-3d-model-ztl.jpg" />
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<div class="row">
<div class="col-xs-12 col-lg-6">
<div><strong>Name：</strong>Bob</div>
</div>
<div class="col-xs-12 col-lg-6" >
<div><strong>Stack：</strong>ADCM</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-lg-6">
<div><strong>Agency：</strong>AFDM</div>
</div>
<div class="col-xs-12 col-lg-6">
<div><strong>Grade：</strong>C</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<div class="row">
<div class="col-xs-6 col-lg-6 col-sm-6 col-md-6">
<span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>
</div>
<div class="col-xs-6 col-lg-6 col-sm-6 col-md-6">
<span class="glyphicon glyphicon-lamp" aria-hidden="true"></span>
</div>
<div class="col-xs-6 col-lg-6 col-sm-6 col-md-6">
<strong>Available</strong>
</div>
<div class="col-xs-6 col-lg-6 col-sm-6 col-md-6">
<strong>Link</strong>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div id="collapseme" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">One</li>
<li class="list-group-item">Two</li>
<li class="list-group-item">Three</li>
</ul>
</div>
</div>
</div>
</div>
答案 1 :(得分：1)
这是我如何处理代码背后的理论：
- 围绕div中的每个部分以及
float:left他们或display: inline-block他们。 - 时间到来时，使用媒体标记添加
float: none或display: block。
注意不要将表格用于响应式设计，这是最糟糕的处理方式。
粗略示例：
＆＃13;
＆＃13;
＆＃13;
＆＃13;
.first,
.second,
.third {
width: 33%;
padding: 1%;
display: inline-block;
}
img {
max-width: 100%;
}
.vertical-align {
display: flex;
align-items: center;
}
.led-red-trans {
margin: 0 auto;
width: 24px;
height: 24px;
background-color: #F00;
border-radius: 50%;
box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 12px;
}
/* Large Devices, Wide Screens */
@media (min-width: 1200px) {
}
/* Medium Devices, Desktops */
@media (min-width: 992px) and (max-width: 1199px) {
}
/* Small Devices, Tablets */
@media (max-width: 768px) and (max-width: 991px) {
}
/* Extra Small Devices, Phones */
@media (max-width: 767px) {
}
/* Custom, iPhone Retina */
@media (max-width: 480px) {
.vertical-align {
display: block;
align-items: center;
}
.first,
.second,
.third {
width: 100%;
}
}<div class="col-md-12" style="border:black solid 1px;">
<div class="row vertical-align">
<div class="col-sm-2 first">
<div class="row">
<div style="padding:5px;" class="col-xs-4">
<input style="margin:40px 0 0;" class="form-inline form-control" type="checkbox">
</div>
<div class="col-xs-8">
<img class="img-responsive" src="https://img-new.cgtrader.com/items/109741/84b639735c/human-stylized-head-bust-base-3d-model-ztl.jpg">
</div>
</div>
</div>
<div class="second">
<div class="col-sm-3">
<div class="row">
<div class="col-xs-12">
<div><strong>Name：</strong>Bob</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div><strong>Agency：</strong>AFDM</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="row">
<div class="col-xs-12">
<div><strong>Stack：</strong>ADCM</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div><strong>Grade：</strong>C</div>
</div>
</div>
</div>
</div>
<div class="third">
<div class="col-sm-1">
<div class="row">
<div class="col-xs-12">
<div class="led-red-trans"></div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<strong>Available</strong>
</div>
</div>
</div>
<div class="col-sm-1">
<div class="row">
<div class="col-xs-12">
<span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<strong>Link</strong>
</div>
</div>
</div>
<div class="col-sm-2">
<div class="row">
<div class="col-xs-12">
<a data-toggle="collapse" href="#collapseme"><span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span></a>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<strong>More</strong>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div id="collapseme" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">One</li>
<li class="list-group-item">Two</li>
<li class="list-group-item">Three</li>
</ul>
</div>
</div>
</div>
</div>
答案 2 :(得分：1)
我的建议是将其分为3列。然后将这些列拆分为子列。像这样......
large screen
l4 l4 l4
| | l6 | l6 | l6 l6 |
| Image | |Name, Agency| |Stack, Group| | |Availability| |Link 1| |
medium screen
m4 m4 m4
| | m12 | m12
| | |Name, Agency| | |Availability|
| | m12 | m12
| | |Stack, Group| | |Link 1|
small screen everything will be sm-12
一个简单的实现 - codepen
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？