Bootstrap網站僅在移動設備上僅佔全身寬度

仍建築此頁http://brighterwebdesign.co.uk/web-solutions-business-startup.html。它在桌面上運行良好，但一旦您在屏幕小於480像素的移動設計上查看它（例如，Nexus 5x），則文本不會完全填滿本體（請在下面查看圖像）。Bootstrap網站僅在移動設備上僅佔全身寬度

我試着玩視口，給身體等增加100％的寬度，只是不工作，有沒有人有一個想法如何解決這個問題？

由於

2016-10-13 Luizarios

這是因爲與電子商務和網頁設計塊的彈性盒模型。修復它們，你的網站會很好。 –

Hi Kiran，你是對的，這裏是我使用的規則：@media（max-width：768px）{ .row.flex { display：inherit; } } – Luizarios

嗨Luizarios。很高興現在已經解決了。祝你有美好的一天 –

在.row .flex取出負餘量，然後敲填充關閉兩個有色部分。嘗試使用瀏覽器工具，似乎可以消除溢出問題。

2016-10-13 12:41:15 defteH

從.row.flex刪除margin-left:-15px;和margin-right:-15px並設置0左和.other-services-centred

例如右填充你將不得不寫

.row.flex { 
     margin-left:0; 
     margin-right:0; 
    } 
.other-services-centred { 
     padding:45px 0 ; 
    }

希望它有助於

2016-10-13 12:44:44

您還沒有定義什麼.other-services-centered的行爲在移動設備中。即，直到767px;像素寬屏幕爲設備定義的沒有網格。有一個具體的方法，bootstrap類是如何工作的。需要了解這種結構。

在您的HTML中，如果您想要以兩列方式顯示它，請添加col-xs-6類，如果要堆疊這些div，請使用col-xs-12。

<div style="background-color: #D8BF6E;" class="col-sm-6 col-xs-6 other-services-centred" .....>

實施例圖像：

2016-10-13 12:55:28

感謝所有誰嘗試，但問題是由顯示引起的：彎曲;這裏是我如何修復它：

@media(max-width:768px){ .row.flex { display: inherit; } }

2016-10-13 14:21:31 Luizarios

回答