这是我第一次使用Bootstrap，我在试图让我的内容成为中心时遇到了一些问题。
我想要包含内容宽度，但允许背景颜色流动页面的整个宽度。我试图偏移列，但这只会导致内容两侧的间距不均匀。
我目前的标记在这里：
https://codepen.io/charlyanderson/pen/bKggyb?editors=1100
<div class="container-fluid">
<div class="row">
<div id="example-col-1" class="col-lg-5">
<div class="row">
<div class="col-lg-8 offset-md-4">
<p>Fusce maximus, elit non mollis consectetur, neque nisi iaculis est, suscipit feugiat magna urna suscipit mauris. In hac habitasse platea dictumst. Vestibulum efficitur dui in ultricies placerat. Etiam nec ipsum ac lectus finibus malesuada. Vestibulum varius pretium ipsum imperdiet condimentum. Curabitur tincidunt maximus auctor. Donec vulputate mollis ligula, a pellentesque tortor tincidunt non.</p>
</div>
</div>
</div>
<div id="example-col-2" class="col-lg-7">
<div class="row">
<div class="col-lg-8">
<p>Fusce maximus, elit non mollis consectetur, neque nisi iaculis est, suscipit feugiat magna urna suscipit mauris. In hac habitasse platea dictumst. Vestibulum efficitur dui in ultricies placerat. Etiam nec ipsum ac lectus finibus malesuada. Vestibulum varius pretium ipsum imperdiet condimentum. Curabitur tincidunt maximus auctor. Donec vulputate mollis ligula, a pellentesque tortor tincidunt non.</p>
</div>
</div>
</div>
</div>
</div>
答案 0 :(得分：0)
ml-auto，为第二个内部列使用mr-auto。
#example-col-1 {
background-color: beige;
}
#example-col-2 {
background-color: pink;
text-align: right;
}<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div id="example-col-1" class="col">
<div class="row">
<div class="col-lg-8 ml-auto">
<p>Fusce maximus, elit non mollis consectetur, neque nisi iaculis est, suscipit feugiat magna urna suscipit mauris. In hac habitasse platea dictumst. Vestibulum efficitur dui in ultricies placerat. Etiam nec ipsum ac lectus finibus malesuada.
Vestibulum varius pretium ipsum imperdiet condimentum. Curabitur tincidunt maximus auctor. Donec vulputate mollis ligula, a pellentesque tortor tincidunt non.</p>
</div>
</div>
</div>
<div id="example-col-2" class="col">
<div class="row">
<div class="col-lg-8 mr-auto">
<p>Fusce maximus, elit non mollis consectetur, neque nisi iaculis est, suscipit feugiat magna urna suscipit mauris. In hac habitasse platea dictumst. Vestibulum efficitur dui in ultricies placerat. Etiam nec ipsum ac lectus finibus malesuada.
Vestibulum varius pretium ipsum imperdiet condimentum. Curabitur tincidunt maximus auctor. Donec vulputate mollis ligula, a pellentesque tortor tincidunt non.</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
https://codepen.io/anon/pen/BVpWwo
col-lg-4列。
#example-col-1 {
background-color: beige;
}
#example-col-2 {
background-color: pink;
text-align: right;
}<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div id="example-col-1" class="col">
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-8">
<p>Fusce maximus, elit non mollis consectetur, neque nisi iaculis est, suscipit feugiat magna urna suscipit mauris. In hac habitasse platea dictumst. Vestibulum efficitur dui in ultricies placerat. Etiam nec ipsum ac lectus finibus malesuada.
Vestibulum varius pretium ipsum imperdiet condimentum. Curabitur tincidunt maximus auctor. Donec vulputate mollis ligula, a pellentesque tortor tincidunt non.</p>
</div>
</div>
</div>
<div id="example-col-2" class="col">
<div class="row">
<div class="col-lg-8">
<p>Fusce maximus, elit non mollis consectetur, neque nisi iaculis est, suscipit feugiat magna urna suscipit mauris. In hac habitasse platea dictumst. Vestibulum efficitur dui in ultricies placerat. Etiam nec ipsum ac lectus finibus malesuada.
Vestibulum varius pretium ipsum imperdiet condimentum. Curabitur tincidunt maximus auctor. Donec vulputate mollis ligula, a pellentesque tortor tincidunt non.</p>
</div>
<div class="col-lg-4"></div>
</div>
</div>
</div>
</div>
</body>
</html>
https://codepen.io/anon/pen/jKyBwy
您可能会发现此问题也很有用。
Offsetting columns is not working (Bootstrap v4.0.0-beta)
如果您想要更小的左列和更大的右列，请使用此代码。
#example-col-1 {
background-color: beige;
}
#example-col-2 {
background-color: pink;
}<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div id="example-col-1" class="col-5">
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-8">
<p>Fusce maximus, elit non mollis consectetur, neque nisi iaculis est, suscipit feugiat magna urna suscipit mauris. In hac habitasse platea dictumst. Vestibulum efficitur dui in ultricies placerat. Etiam nec ipsum ac lectus finibus malesuada. Vestibulum varius pretium ipsum imperdiet condimentum. Curabitur tincidunt maximus auctor. Donec vulputate mollis ligula, a pellentesque tortor tincidunt non.</p>
</div>
</div>
</div>
<div id="example-col-2" class="col-7">
<div class="row">
<div class="col-lg-9 text-right">
<p>Fusce maximus, elit non mollis consectetur, neque nisi iaculis est, suscipit feugiat magna urna suscipit mauris. In hac habitasse platea dictumst. Vestibulum efficitur dui in ultricies placerat. Etiam nec ipsum ac lectus finibus malesuada. Vestibulum varius pretium ipsum imperdiet condimentum. Curabitur tincidunt maximus auctor. Donec vulputate mollis ligula, a pellentesque tortor tincidunt non.</p>
</div>
<div class="col-lg-3"></div>
</div>
</div>
</div>
</div>
</body>
</html>
顺便说一下，最好使用text-right代替text-align: right;样式。