Bootstrap 3并排容器答案

【问题标题】：Bootstrap 3 side by side containersBootstrap 3并排容器
【发布时间】：2018-03-08 15:08:11
【问题描述】：

我正在尝试制作一个网页，其中我的内容的左半部分尊重引导程序.container max-width 大小，而我的右侧可以一直到页面的末尾，如 @987654327 @ 会工作。

类似这样的图片：

到目前为止，我已经尝试了几种方法，目前我正在使用以下代码：

        <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>

这会产生以下结果：

【问题讨论】：

一个容器，一行，两列。两列都有自己的容器，每个容器都有自己的行，每一行都有自己的列。
容器是块元素。默认情况下它将占用 100% 的宽度。因此，您的容器不会并排放置。
@sksallaj 是这样的吗？ pastebin.com/ZmQvxg9m
@adpro 那么没有办法实现它吗？
有办法发生。看我的回答。最好重新考虑你的标记，但如果你想保留标记，你可以做一些类似于我在回答中所做的事情。

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

使用您当前的标记，您可以这样做：

.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 也可能是一个不错的解决方案。

【讨论】：

记得点击“整页”以查看大于 xs 宽度的 sn-p。

【解决方案2】：

.container .row {
    padding: 30px;
}

.container-fluid, .container {
    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-md-12 col-sm-6">
            <div class="row">
                <div class="col-md-12">
                    <h1 class="text-center">Lorem Ipsum</h1>
                    <p class="text-center">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-md-12 col-sm-6">
            <div class="row">
                <div class="col-xs-12">
                    <h1 class="text-center">Lorem Ipsum</h1>
                    <p class="text-center">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>

【讨论】：

请在您的回答中添加解释