English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Давайте посмотрим на пример сетки с простой композицией: содержит две колонки, каждая из которых содержит два абзаца. (Здесь для каждой колонки были определены стили, и вы можете избежать этого.)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap пример - выравнивание по горизонтали</title> <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h1>Hello, world!</h1> <div class="row"> <div class="col-md-6" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do</p> eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</p> accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </p> </div> <div class="col-md-6" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</p> accusantium doloremque laudantium. </p> <p>Neque porro quisquam est, qui dolorem ipsum quaerat, dolor sit amet,</p> consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. </p> </div> </div> </div> </body> </html>проверьте, посмотрите ‹/›
результат показан ниже:
детали
<div>...</div> элементы добавлены, убедитесь, что они выровнены по центру и имеют максимальную ширину.
Как только контейнер добавлен,接下来您需要考虑以行为单位。添加 <div>...</div>и добавьте столбцы в строку <div></div>.
Каждая строка в сетке состоит из 12 ячеек, которые вы можете использовать для определения размера столбца. В нашем примере есть два столбца, каждый из которых состоит из 6 ячеек, то есть 6+6=12.
Вы можете попробовать другие дополнительные параметры, например <div></div> и <div></div> или <div></div> и <div></div>.
Вы можете попробовать, но убедитесь, что сумма всегда составляет 12.