Làm cách nào để ngăn cuộn ngang trên trang web đáp ứng?

Question

Tôi đang sử dụng trình khởi động twitter để làm cho ứng dụng của tôi phản hồi. Khi tôi thu hẹp chiều rộng của cửa sổ trình duyệt của tôi về kích thước tối thiểu hoặc xem trang trên thiết bị di động (ví dụ: iPhone), người dùng có thể cuộn theo chiều ngang. Số lượng cuộn ngang là nhỏ nhưng tôi muốn loại bỏ nó tất cả cùng nhau.

Tôi tin rằng đó là do container img mà tôi đang đưa vào, nhưng tôi không có ở đây. Html của trang nằm ở đây: http://pastebin.ca/2347946.

Bất kỳ lời khuyên nào về cách ngăn cuộn ngang cho trang trong khi vẫn duy trì cuộn trong vùng chứa img?

Answer 1

tôi khá chắc chắn ở đâu đó một phần tử con của bạn vượt quá chiều rộng của phần tử gốc. Kiểm tra mã của bạn hai lần, nếu có bất kỳ kích thước hộp nào của các phần tử con bên trong lớn vì một trong những lý do như - khi chiều rộng hộp bao gồm margin, padding, border vượt quá giới hạn. Và chúng tôi có thể chưa thêm overflow: hidden; vào phần tử mẹ bên ngoài của nó. Trong trường hợp này, chúng được coi là vượt quá yếu tố cha mẹ và trình duyệt hiển thị nó với thanh cuộn. Vì vậy, sửa chữa nó thông qua loại bỏ lề, lề, biên giới hoặc nếu bạn chỉ không muốn bất kỳ đau đầu, chỉ cần cố gắng để thêm overflow:hidden; vào hộp bên ngoài.

Answer 2

Cố gắng thêm (trong có liên quan @-rule) một max-width:

img { 
    max-width: NNNpx; 
} 

Điều đó sẽ ngăn chặn img từ quá rộng.

Answer 3

tôi đã cùng một vấn đề, và ứng dụng này để sửa chữa nó:

body { 
    overflow-x: hidden !important; 
} 
.container { 
    max-width: 100% !important; 
    overflow-x: hidden !important; 
} 

Để mở rộng một chút, tôi chỉ có vấn đề về điện thoại di động, vì vậy đây là mã cuối cùng của tôi:

@media screen and (max-width: 667px) { 
    body { 
     overflow-x: hidden !important; 
    } 
    .container { 
     max-width: 100% !important; 
     overflow-x: hidden !important; 
    } 
} 

Tôi tìm thấy các vấn đề liên quan đến điều này trên Github, vì vậy tôi đoán các phiên bản mới hơn của Bootstrap đã được vá.

Answer 4

"overflow: hidden;" phong cách là phương thuốc không phải là phòng ngừa. Nếu bạn muốn ngăn chặn điều này, bạn phải kiểm tra các yếu tố cơ thể của bạn lớn hơn cơ thể. Điều này xảy ra khi bạn lấy một số div có "đệm" hoặc "lề" bên ngoài ".container" class (twitter bootstrap). Vì vậy, loại bỏ tất cả các phần đệm và lề ngoài lớp container.