Bootstrap - Một số loại lề trên các thiết bị di động (chỉ ngay bên)

Question

tôi đã tạo ra một trang điện thoại di động với bootstrap, nhưng đối với một số loại trang điện thoại di động có một margin hoặc padding trên các thiết bị di động ở phía bên phải, nơi tôi có thể trượt tới. Tôi đã xóa một số mã, nhưng ngay cả những cấu trúc đơn giản nhất có nó:

<div class="container"> 
     <div class="row"> 
      <div class="col-lg-12"> 
      <div class="navigation"></div> 
      </div> 
     </div> 
    </div><!--container--> 

.container { 
    max-width:100%; 
    padding:0; 
    height: 100%; 
    width:100%; 
} 

.navigation { 
    height:3.4375em; 
    line-height:1em; 
    background-color:#E75200; 
} 

Tôi đã tải lên trang kiểm tra ở đây: http://wp1011618.server-he.de/projekte/test/index2.html

Tôi có cảm giác rằng đó là vì các col-lg-12 đệm , nhưng Bootstrap này không thể được Bootstraps ý định vì vậy tôi tự hỏi whats sai ở đây?

Cảm ơn!

Answer 1

I figured it out:

html, body { 
    overflow-x: hidden; 
} 

Giải quyết nó cho tôi!

Answer 2

Nếu bạn muốn đặt đệm đúng trên tiêu đề ví dụ của mình, thì chỉ cần thực hiện kiểu đó trong .container ví dụ: Đệm-Phải: 12px.

Answer 3

.col-lg-12 lớp học có padding-right: 15px; và padding-left: 15px;, gây ra khoảng trắng. Làm cho họ 0, vì xóa margin-right: -15px; và margin-left: -15px; trong .row lớp.

Answer 4

Bạn có biết bạn không có bootstrap.min.js tập tin trong thư mục js của bạn? Dù sao, giải pháp chỉ là không sử dụng "col-lg-12" div, "hàng" sẽ điền vào 100% chiều rộng vì vậy tại sao bạn muốn điều này?