#html #css #twitter-bootstrap-3 #css-float
#HTML #css #twitter-bootstrap-3 #css-float
Вопрос:
Я использую bootstrap 3, который использует float для выравнивания содержимого. Пользовательский интерфейс прерывается при увеличении высоты 1-го столбца. Не хотите добавлять фиксированную высоту к любому столбцу. например. Здесь это сетка из 2 столбцов.. Таким образом, высота 1-го и 2-го столбцов должна быть одинаковой, а 3-й и четвертый столбцы должны быть одинаковыми .. и все 4 столбца должны находиться внутри 1 родительского .. если высота 1-го столбца увеличивается, то высота 2-го столбца должна увеличиваться. Я не хочу делать это с помощью flex
Есть ли какое-либо исправление CSS. Не хотите добавлять какие-либо js
Заранее спасибо
.left {
float: left;
width: 49%;
border: 1px solid red;
}
.col1 {
background: red;
}
.col2 {
background: black
}
.col3 {
background: blue;
}
.col4 {
background: green;
} <div class="left col1">
Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum. Taciti primis cum varius malesuada lacus mauris tellus justo felis, vitae
quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis ultrices mauris lectus phasellus mattis ornare, semper tempus etiam proin
ante vivamus vitae. Egestas accumsan Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum. Taciti primis cum varius malesuada
lacus mauris tellus justo felis, vitae quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis ultrices mauris lectus phasellus
mattis ornare, semper tempus etiam proin ante vivamus vitae. Egestas accumsan Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum.
Taciti primis cum varius malesuada lacus mauris tellus justo felis, vitae quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis
ultrices mauris lectus phasellus mattis ornare, semper tempus etiam proin ante vivamus vitae. Egestas accumsan Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales
integer tempus eros egestas condimentum. Taciti primis cum varius malesuada lacus mauris tellus justo felis, vitae quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum
venenatis orci dapibus integer, lobortis ultrices mauris lectus phasellus mattis ornare, semper tempus etiam proin ante vivamus vitae. Egestas accumsan
</div>
<div class="left col2">
Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum. Taciti primis cum varius malesuada lacus mauris tellus justo felis, vitae
quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis ultrices mauris lectus phasellus mattis ornare, semper tempus etiam proin
ante vivamus vitae. Egestas accumsan Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum. Taciti primis cum varius malesuada
lacus mauris tellus justo felis, vitae quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis ultrices mauris lectus phasellus
mattis ornare, semper tempus etiam proin ante vivamus vitae. Egestas accumsan Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum.
Taciti primis cum varius malesuada lacus mauris tellus justo felis, vitae quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis
ultrices mauris lectus phasellus mattis ornare, semper tempus etiam proin ante vivamus vitae.
</div>
<div class="left col3">
Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum. Taciti primis cum varius malesuada lacus mauris tellus justo felis, vitae
quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis ultrices mauris lectus phasellus mattis ornare, semper tempus etiam proin
ante vivamus vitae. Egestas accumsan Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum. Taciti primis cum varius malesuada
lacus mauris tellus justo felis, vitae quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis ultrices mauris lectus phasellus
mattis ornare, semper tempus etiam proin ante vivamus vitae. Egestas accumsan Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum.
Taciti primis cum varius malesuada lacus mauris tellus justo felis, vitae quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis
ultrices mauris lectus phasellus mattis ornare, semper tempus etiam proin ante vivamus vitae.
</div>
<div class="left col4">
Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum. Taciti primis cum varius malesuada lacus mauris tellus justo felis, vitae
quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis ultrices mauris lectus phasellus mattis ornare, semper tempus etiam proin
ante vivamus vitae. Egestas accumsan Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum. Taciti primis cum varius malesuada
lacus mauris tellus justo felis, vitae quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis ultrices mauris lectus phasellus
mattis ornare, semper tempus etiam proin ante vivamus vitae. Egestas accumsan Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum.
Taciti primis cum varius malesuada lacus mauris tellus justo felis, vitae quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis
ultrices mauris lectus phasellus mattis ornare, semper tempus etiam proin ante vivamus vitae.
</div> Комментарии:
1. Не совсем понятно, чего вы хотите, но если вы удалите height: 300px из .col1, вы получите желаемый результат?
2. @sergeykuznetsov Я отредактировал код, пожалуйста, проверьте. Надеюсь, вы поняли проблему
3. Вы хотите сделать все div одинаковой высоты, ориентируясь на максимальный div?
4. нет .. Здесь это сетка из 2 столбцов.. Таким образом, высота 1-го и 2-го столбцов должна быть одинаковой, а 3-й и четвертый столбцы должны быть одинаковыми .. и все 4 столбца должны находиться внутри 1 родительского.. Я не хочу делать это с помощью flex
5. Теперь я вас понимаю. Но почему вы не хотите использовать flex? В конце концов, это легко сделать с помощью flex.
Ответ №1:
Ну, у Bootstrap есть своя собственная система сетки. Кроме того, вы также не используете классы, которые определены в bootstrap 3. Вот решение, которое я создал с помощью Bootstrap 3. Убедитесь, что вы видите решение на полноэкранном режиме.
@media screen and (max-width: 768px) {
.col4{
margin-top: 0px !important;
}
}
.col1 {
background: red;
}
.col2 {
background: black;
color: white;
}
.col3 {
background: blue;
}
.col4 {
background: green;
margin-top: -440px;
} <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- Latest compiled and minified CSS (MUST ADD THIS CDN) -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col1">
Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum. Taciti primis cum varius malesuada lacus mauris tellus justo felis, vitae
quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis ultrices mauris lectus phasellus mattis ornare, semper tempus etiam proin
ante vivamus vitae. Egestas accumsan Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum. Taciti primis cum varius malesuada
lacus mauris tellus justo felis, vitae quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis ultrices mauris lectus phasellus
mattis ornare, semper tempus etiam proin ante vivamus vitae. Egestas accumsan Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum.
Taciti primis cum varius malesuada lacus mauris tellus justo felis, vitae quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis
ultrices mauris lectus phasellus mattis ornare, semper tempus etiam proin ante vivamus vitae. Egestas accumsan Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales
integer tempus eros egestas condimentum. Taciti primis cum varius malesuada lacus mauris tellus justo felis, vitae quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum
venenatis orci dapibus integer, lobortis ultrices mauris lectus phasellus mattis ornare, semper tempus etiam proin ante vivamus vitae. Egestas accumsan
Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum. Taciti primis cum varius malesuada lacus mauris tellus justo felis, vitae
quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis ultrices mauris lectus phasellus mattis ornare, semper tempus etiam proin
ante vivamus vitae. Egestas accumsan Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum. Taciti primis cum varius malesuada
lacus mauris tellus justo felis, vitae quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis ultrices mauris lectus phasellus
mattis ornare, semper tempus etiam proin ante vivamus vitae. Egestas accumsan Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum.
Taciti primis cum varius malesuada lacus mauris tellus justo felis, vitae quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis
ultrices mauris lectus phasellus mattis ornare, semper tempus etiam proin ante vivamus vitae. Egestas accumsan Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales
integer tempus eros egestas condimentum. Taciti primis cum varius malesuada lacus mauris tellus justo felis, vitae quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum
venenatis orci dapibus integer, lobortis ultrices mauris lectus phasellus mattis ornare, semper tempus etiam proin ante vivamus vitae. Egestas accumsan
</div>
<div class="col-md-6 col2">
Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum. Taciti primis cum varius malesuada lacus mauris tellus justo felis, vitae
quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis ultrices mauris lectus phasellus mattis ornare, semper tempus etiam proin
ante vivamus vitae. Egestas accumsan Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum. Taciti primis cum varius malesuada
lacus mauris tellus justo felis, vitae quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis ultrices mauris lectus phasellus
mattis ornare, semper tempus etiam proin ante vivamus vitae. Egestas accumsan Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum.
Taciti primis cum varius malesuada lacus mauris tellus justo felis, vitae quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis
ultrices mauris lectus phasellus mattis ornare, semper tempus etiam proin ante vivamus vitae. Egestas accumsan Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales
integer tempus eros egestas condimentum. Taciti primis cum varius malesuada lacus mauris tellus justo felis, vitae quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum
venenatis orci dapibus integer, lobortis ultrices mauris lectus phasellus mattis ornare, semper tempus etiam proin ante vivamus vitae. Egestas accumsan
</div>
</div>
<div class="row">
<div class="col-md-6 col3">
Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum. Taciti primis cum varius malesuada lacus mauris tellus justo felis, vitae
quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis ultrices mauris lectus phasellus mattis ornare, semper tempus etiam proin
ante vivamus vitae. Egestas accumsan Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum. Taciti primis cum varius malesuada
lacus mauris tellus justo felis, vitae quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis ultrices mauris lectus phasellus
mattis ornare, semper tempus etiam proin ante vivamus vitae. Egestas accumsan Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum.
Taciti primis cum varius malesuada lacus mauris tellus justo felis, vitae quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis
ultrices mauris lectus phasellus mattis ornare, semper tempus etiam proin ante vivamus vitae. Egestas accumsan Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales
integer tempus eros egestas condimentum. Taciti primis cum varius malesuada lacus mauris tellus justo felis, vitae quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum
venenatis orci dapibus integer, lobortis ultrices mauris lectus phasellus mattis ornare, semper tempus etiam proin ante vivamus vitae. Egestas accumsan
</div>
<div class="col-md-6 col4">
Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum. Taciti primis cum varius malesuada lacus mauris tellus justo felis, vitae
quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis ultrices mauris lectus phasellus mattis ornare, semper tempus etiam proin
ante vivamus vitae. Egestas accumsan Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum. Taciti primis cum varius malesuada
lacus mauris tellus justo felis, vitae quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis ultrices mauris lectus phasellus
mattis ornare, semper tempus etiam proin ante vivamus vitae. Egestas accumsan Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum.
Taciti primis cum varius malesuada lacus mauris tellus justo felis, vitae quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis
ultrices mauris lectus phasellus mattis ornare, semper tempus etiam proin ante vivamus vitae. Egestas accumsan Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales
integer tempus eros egestas condimentum. Taciti primis cum varius malesuada lacus mauris tellus justo felis, vitae quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum
venenatis orci dapibus integer, lobortis ultrices mauris lectus phasellus mattis ornare, semper tempus etiam proin ante vivamus vitae. Egestas accumsan
Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum. Taciti primis cum varius malesuada lacus mauris tellus justo felis, vitae
quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis ultrices mauris lectus phasellus mattis ornare, semper tempus etiam proin
ante vivamus vitae. Egestas accumsan Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum. Taciti primis cum varius malesuada
lacus mauris tellus justo felis, vitae quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis ultrices mauris lectus phasellus
mattis ornare, semper tempus etiam proin ante vivamus vitae. Egestas accumsan Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum.
Taciti primis cum varius malesuada lacus mauris tellus justo felis, vitae quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis
ultrices mauris lectus phasellus mattis ornare, semper tempus etiam proin ante vivamus vitae. Egestas accumsan Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales
integer tempus eros egestas condimentum. Taciti primis cum varius malesuada lacus mauris tellus justo felis, vitae quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum
venenatis orci dapibus integer, lobortis ultrices mauris lectus phasellus mattis ornare, semper tempus etiam proin ante vivamus vitae. Egestas accumsan
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript (MUST ADD THIS CDN) -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html> Убедитесь, что вы включили Bootstrap 3 cdn для css и js в свой html-файл. Я использовал онлайн-cdn.Вы также можете использовать загруженный файл. Вот ссылка на Bootstrap 3 CDN. Вы можете перейти по этой ссылке для системы сетки Bootstrap 3.
Комментарии:
1. Спасибо за ответ.. Не могли бы вы увеличить содержимое 1-го столбца.. Проблема заключается в увеличении содержимого 1-го div. И столбец должен находиться внутри 1 строки. Спасибо
2. Я отредактировал код для вас. Вы можете использовать отрицательный запас для настройки этого конкретного div. Кроме того, я также увеличил содержимое 1-го столбца.
3. Это не то, что я искал.. Здесь это сетка из 2 столбцов.. Таким образом, высота 1-го и 2-го столбцов должна быть одинаковой, а 3-й и четвертый столбцы должны быть одинаковыми .. и все 4 столбца должны находиться внутри 1 родительского .. если высота 1-го столбца увеличивается, то высота 2-го столбца должна увеличиваться. Я не хочу делать это с помощью flex