当列堆叠时，用 Bootstrap 填充关闭

Question

我目前正在重新设计我的网站，我正在尝试使用 Bootstrap 框架——我可以通过 HTML 探索我的方法，但我仍然是代码的初学者。

我遇到的问题是，当我的两列文本堆叠在较小的屏幕上时，第二列的填充会超出第一列的左侧，就好像它漂浮在图像周围一样，这它不是。我通过样式表链接到 bootstrap 核心，所以我不能直接编辑它。（我认为这可能是最安全的）

代码：

#container {width:95%; max-width:900px; margin:0 auto;}
#main-nav {
 float:right;
 margin-top:-50px;
 max-width:500px;
}
#maincontent {width:100%; margin:10px;}

img{width: auto; max-width:105%;}
a img{border:none;}

@media screen and (max-width:1002px) {
 .img{width:auto; max-width:80%;}}


@media screen and (max-width: 957px) {
 #socialbuttons {margin-top:-45px;}
 #container {margin: 30px;}
 #container2 {margin:0 50px 10px 50px; width:100%;}
 #main-nav {margin-right: 50px;}}
 
@media screen and (max-width: 820px) {
 #container2 {width:80%}}

  <div class="wrap" id="maincontent"> <h1>Welcome to Compass Design</h1>
  <p class="col-sm-6">Innovative. Targeting. Creative. Effective Branding - keywords every marketing and design agency claims makes them unique. However, when all graphic design companies claim originality, what makes them different from the next? When you need a Graphic Designer or Print and Website Design Services, turn to Compass Design.<br/><br/>


The team at Compass Design believes in creating a visually unique brand and consistent identity for each of their clients. Their philosophy is simple: honest, friendly, and flexible design that works with your current marketing strategy. Don’t have a marketing strategy? No problem! Compass Design will create one just for you.
</p>
  </span>
    <p><span class="col-sm-6">
      Compass Design’s flexible services include custom options, as well as templates you can use on your own. This means there is a service for every budget. Whether your business is just starting out or is already established and just needs a refresh, Compass Design will work with you to reach your marketing goals without breaking the bank.<br/>
  <br/>
      
      Contact Compass Design near Rapid City, SD today to find out how they can create the marketing tools you need to catch the attention of your customers and reach your business goals!<br/><br/>
      
  <strong><span style="font-size:1.25em"> Let Compass Design create compelling print graphics and web — call 605-786-6432.</span></strong></span></p>
  </div>

Answer 1

您的右侧栏有一个 span.col-sm-6 在标签内，左侧栏有 .col-sm-6 class 在 p 标签本身上，所以两个列都选择了不同的 css。堆叠时会变得很明显。它们应该相同，删除跨度并将 class 放在 p 标签上。

当列堆叠时，用 Bootstrap 填充关闭

Padding with Bootstrap is off when the columns stack

html

css

padding

twitter-bootstrap