Không thể thực hiện công việc thiết kế đáp ứng bootstrap với dotnetnuke

Question

Tôi đã sử dụng trình khởi động twitter trong dự án của tôi với DotNetNuke. Tôi đã thiết kế và bố trí của tôi bằng cách sử dụng HTML, CSS, bootstrap. Thiết kế đáp ứng hoạt động tốt khi tôi thử nghiệm trên các thiết bị di động khác nhau và ngay cả khi tôi đổi kích thước cửa sổ trình duyệt của mình.

Vì nó hoạt động tốt, tôi đã chuyển đổi thiết kế sang DotNetNuke Skin. Bây giờ, thiết kế đáp ứng hoạt động tốt chỉ khi tôi thay đổi kích thước cửa sổ trình duyệt và không hoạt động trên thiết bị di động. Tôi hiểu luồng mà DNN tải bảng định kiểu và tôi đã theo dõi nó. Tôi đã tạo skin.css của tôi như là một sự kết hợp của bootstrap.css và tiếp theo là nội dung của bootstrap-responsive.css

Tôi không thể tìm thấy vấn đề như thể tôi sử dụng cùng skin.cs với html của tôi, nó hoạt động tốt nhưng nó không hoạt động với DNN (trên thiết bị di động).

Answer 1

Bạn đang thiếu thẻ meta nhắm mục tiêu thiết bị di động cho đúng tỷ lệ. Chèn nội dung sau vào tiêu đề của trang của bạn:

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

Answer 2

Tôi chỉ chú ý điều gì đó thú vị và muốn chia sẻ nó, có thể nó sẽ giúp ai đó. Trong phần tiêu đề trang, bạn nên bao gồm bootstrap.css đầu tiên và chỉ sau đó bootstrap-responsive.css vì rõ ràng là responsive.css phụ thuộc vào bootstrap.css

Tất nhiên, thẻ meta cũng phải có mặt.

<link href="/css/bootstrap.css" rel="stylesheet" type="text/css" /> 
<link href="/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" /> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

Answer 3

Hãy chắc chắn đáp ứng CSS (responsive.css) được bao gồm sau cơ bản không trước.