当列堆叠时，使用 Bootstrap 进行填充答案

【问题标题】：Padding with Bootstrap is off when the columns stack当列堆叠时，使用 Bootstrap 进行填充
【发布时间】：2015-11-12 00:27:50
【问题描述】：

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

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

代码：

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

【问题讨论】：

我认为您应该深入了解这些教程。使用 col-sm-* 语法时，需要 .row 和 .container 左右。
问题是您在 ID 为 container 的元素上指定宽度，它似乎也没有为 Bootstrap 正确格式化，容器应该是一个类而不是一个 ID。 Bootstrap 的正确结构是 .container > .row > .col-xx-x

标签： html css twitter-bootstrap padding

【解决方案1】：

您的右侧列有一个 span.col-sm-6 inside p 标签，左侧的 p 标签本身有一个 .col-sm-6 类，所以两个列都是拿起不同的CSS。堆叠起来就很明显了。它们应该是一样的，去掉 span 并将类放在 p 标签上。

【讨论】：