#html #css #twitter-bootstrap
#HTML #css #twitter-bootstrap
Вопрос:
у меня проблема с Bootstrap. Я хочу установить два элемента — один с содержимым, расположенным по центру (давайте назовем его .top ), и другой, который будет одинаково располагаться с левой стороны на .top , а с правой стороны он будет прикреплен к правой стороне браузера (давайте назовем его .btm ). Я знаю, что когда я добавлю .container класс, он будет центрировать мой .top элемент (путем добавления margin-left: auto и margin-right: auto ), но как сделать так, чтобы .btm элемент находился на том же уровне, что и .top элемент с левой стороны? Когда я установлю некоторое margin-left , я потеряю его значение при первом изменении ширины браузера. Как я могу этого добиться? В настоящее время у меня есть что-то вроде этого:
HTML:
<div class="container">
<div class="row">
<div class="top">
<strong>top text</strong>, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum
</div>
</div>a
</div>
<div class="row">
<div class="btm"> <!-- i want to make this equal on the left side as the ".top" element-->
<strong>bottom text</strong>, , lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum
</div>
</div>
CSS:
body {
background-color: #cfcfcf;
}
.top{
height: 100px;
}
.btm{
margin-left: 10%;
background: #008B4F;
}
Вот codepen:
http://codepen.io/anon/pen/YGdmQG
Комментарии:
1. То, что я искал, было:
<div class="row"> <div class="col-md-offset-2 col-md-8"> <div class="top"> <strong>top text</strong> </div> </div> </div> <div class="row"> <div class="col-md-offset-2 col-md-10"> <div class="btm"> <strong>bottom text</strong> </div> </div> </div>
Ответ №1:
Вы должны, <div class="container"> наконец, перейти к разделу .btm.
Что вы сделали, так это то, что вы закрыли div сразу после раздела «.top».
И удалите левое поле: 10% в вашем .btm css.
Ваш HTML должен быть:-
<div class="container">
<div class="row">
<div class="top">
<strong>top text</strong>, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum,
</div>
</div>
<div class="row">
<div class="btm"> <!-- i want to make this equal on the left side as the ".top" element-->
<strong>bottom text</strong> lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsumipsum
</div>
</div>
</div>
CSS:-
.btm{
background: #008B4F;
}
Ответ №2:
Вот так, мой друг
body {
background-color: #cfcfcf;
}
.top{
height: 100px;
}
.btm{
background: #008B4F;
} <div class="container">
<div class="row">
<div class="top">
<strong>top text</strong>, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum
</div>
</div>
</div>
<div class="row">
<div class="btm">
<strong>bottom text</strong>, , lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum
</div>
</div> Ответ №3:
Удалите левое поле из класса btm
.btm{
background: #008B4F;
}