Bootstrap 3並排容器

Question

我正在嘗試制作一個網頁，其中我內容的左半部分遵循bootstrap .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>