Ngữ nghĩa-giao diện người dùng: Tại sao Nội dung không có cùng kích thước khung nhìn?

Question

Vui lòng xem Hello World-esque application của tôi, được xây dựng với Giao diện người dùng ngữ nghĩa.

Tôi thường xuyên sử dụng ngữ nghĩa giao diện người dùng, tôi thích nó hơn Bootstrap, nhưng tôi đã nhận thấy vấn đề này nhất quán ở các cạnh. Chế độ xem có một số loại lề thừa, chú ý phần dưới cùng của trang web (khoảng trắng) và bên phải của trang web (không gian trống).

Tôi đã thử nghiệm với việc đặt width/height của html/body thành 100%, không có kết quả.

Đây có phải là vấn đề về ngữ nghĩa giao diện người dùng hay nói cách khác không? Bất kỳ đề xuất nào để sửa CSS này?

Answer 1

Đó là vì trong những ui grid tài sản mà kéo nội dung bên ngoài khu vực của nó do lợi nhuận âm. Hãy thử đặt nó thành 0.

.ui.grid { 
    margin: -1rem; // Change to 0 
} 

Cách tốt nhất là quấn lưới ui vào trong thùng chứa. Tôi không chắc chắn tại sao mã CSS .container bị thiếu trong trang web của bạn nhưng chúng có trong Tài liệu.

Semantic UI Docs Lưới được bọc bên trong .main.container có bộ chiều rộng.

Answer 2

nếu bạn thiết lập

.ui.grid {margin:0} 

nó sẽ làm việc

Answer 3

Sự cố xuất hiện bcz của lề mặc định của "lưới ui". Để khắc phục, chỉ cần thêm lớp "đệm" vào phần tử "lưới ui". Chỉ cần như thế này:

<div class="ui grid padded"> 
 
    <!-- your columns --> 
 
</div>

Answer 4

Như Manoj gợi ý, giải pháp theo docs cho lưới điện chính là

<div class="ui grid container"> 
    <div class="four wide column"> 
    <!-- ... --> 
    </div> 
    <!-- ... --> 
</div>