我正在尝试制作一个网页，其中内容的左半部分尊重引导程序.container最大宽度大小，而我的右侧可以一直到页面的末尾，作为.container-fluid会工作。
像这样的图片：
到目前为止，我已经尝试了几种方法，目前我正在使用以下代码：
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla iaculis feugiat est, eu suscipit quam elementum id. Sed nec scelerisque ex. Nunc consectetur vulputate ante, non fermentum odio dignissim nec. Aenean a lectus auctor, suscipit diam vitae, tincidunt ante. Nulla ultrices iaculis orci, a rhoncus nisi consectetur sed. Quisque eget viverra tellus. Cras ac lacinia nibh. Maecenas non dui ut urna aliquet tristique ut a </p>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-offset-6 col-sm-6">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla iaculis feugiat est, eu suscipit quam elementum id. Sed nec scelerisque ex. Nunc consectetur vulputate ante, non fermentum odio dignissim nec. Aenean a lectus auctor, suscipit diam vitae, tincidunt ante. Nulla ultrices iaculis orci, a rhoncus nisi consectetur sed. Quisque eget viverra tellus. Cras ac lacinia nibh. Maecenas non dui ut urna aliquet tristique ut a </p>
</div>
</div>
</div>
产生以下结果：
使用当前的标记，您可以执行以下操作：
.container .row {
padding: 30px;
}
.container-fluid[class*="col-"], .container[class*="col-"] {
padding: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="container col-xs-12 col-sm-6">
<div class="row">
<div class="col-xs-12">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla iaculis feugiat est, eu suscipit quam elementum id. Sed nec scelerisque ex. Nunc consectetur vulputate ante, non fermentum odio dignissim nec. Aenean a lectus auctor, suscipit diam vitae, tincidunt ante. Nulla ultrices iaculis orci, a rhoncus nisi consectetur sed. Quisque eget viverra tellus. Cras ac lacinia nibh. Maecenas non dui ut urna aliquet tristique ut a </p>
</div>
</div>
</div>
<div class="container-fluid col-xs-12 col-sm-6">
<div class="row">
<div class="col-xs-12">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla iaculis feugiat est, eu suscipit quam elementum id. Sed nec scelerisque ex. Nunc consectetur vulputate ante, non fermentum odio dignissim nec. Aenean a lectus auctor, suscipit diam vitae, tincidunt ante. Nulla ultrices iaculis orci, a rhoncus nisi consectetur sed. Quisque eget viverra tellus. Cras ac lacinia nibh. Maecenas non dui ut urna aliquet tristique ut a </p>
</div>
</div>
</div>
不过，我建议重新考虑标记。container这里可能不是您的最佳选择。它似乎flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/可能也是一个很好的解决方案。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
