Bootstrap网站仅在移动设备上不占用100％的体宽

Question

仍在构建此页面http://brighterwebdesign.co.uk/web-solutions-business-startup.html。它在桌面上工作正常但是一旦你在屏幕小于480px的移动设计上查看它（例如Nexus 5x），那么文本就不会完全填满整个身体（请参见下面的图片）。

我尝试过使用视口，向身体添加100％的宽度等，只是不工作，有没有人知道如何解决这个问题？

谢谢

layout on a nexus 5x

Answer 1

删除.row .flex上的负边距，然后将两个彩色部分的衬垫敲掉。在您的浏览器工具中尝试，似乎可以消除溢出的问题。

Answer 2

从margin-left:-15px;移除margin-right:-15px和.row.flex，并为0

设置.other-services-centred左右填充 例如，你必须写

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

希望有所帮助

Answer 3

您尚未定义.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" .....>

示例图片：

Answer 4

感谢所有尝试过的人，但问题是由display：flex;这是我如何解决它：

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