填充引導是關閉時，列堆棧

我目前正在重新設計我的網站，我試圖使用引導框架 - 我可以通過HTML戳我的方式，但我仍然是一個初學者的代碼。填充引導是關閉時，列堆棧

我遇到的問題是，當我的兩列文本堆疊在較小的屏幕上時，第二列上的填充伸出到第一列左側，好像它漂浮在圖像周圍一樣，不是。我通過樣式錶鏈接到引導程序核心，因此我無法直接編輯它。（我想對我來說，這是最安全的可能）

CODE：

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

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

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

 

 
@media screen and (max-width: 957px) { 
 
\t #socialbuttons {margin-top:-45px;} 
 
\t #container {margin: 30px;} 
 
\t #container2 {margin:0 50px 10px 50px; width:100%;} 
 
\t #main-nav {margin-right: 50px;}} 
 
\t 
 
@media screen and (max-width: 820px) { 
 
\t #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>

來源

2015-08-18 pfost74

我認爲你應該深入瞭解教程。使用col-sm- *語法時，需要.row和.container。 –

問題是，您要在ID爲'container'的元素上指定一個寬度，它對於Bootstrap來說似乎也沒有正確格式化，容器應該是一個類而不是ID。 Bootstrap的正確結構是'.container'>'.row'>'.col-xx-x' – APAD1

你的右側列有span.col-SM-6 內 p標籤中，在p標籤上留下了一個.col-sm-6類，所以兩個cols都在拾取不同的css。堆疊時會變得很明顯。他們應該是一樣的，刪除跨度並將類放在p標籤上。

來源

2015-08-18 21:47:30 amespower

填充引導是關閉時，列堆棧

回答

相關問題