Question

我正在尝试创建一个网页，其中我的内容的左半部分尊重引导.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>

产生以下结果：

Answer 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也可能是一个很好的解决方案。

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

Bootstrap 3并排容器

2 个答案: