0
Каков наилучший способ сделать это отзывчивым в бутстрапе?
У меня есть макет, который я хочу сделать отзывчивым в бутстрапе в соответствии с устройством. Я хочу знать, как я могу выполнить его так, как показано на изображении. Я пробовал использовать ячейки таблицы и столбцы/строки начальной загрузки, но безрезультатно.
Я хочу, чтобы элементы выше доступности и ссылка 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
оценить усилия, но я действительно не думаю, что это помогает .. Добавление часть кода тоже будет полезно, а не делать это как произведение назначения на OP и для будущей толпы –
Да, я понял, что после ... работая над этим сейчас ... –
Это имеет смысл! Позвольте мне попробовать это сейчас –