Height bootstraps 4

#1

em có đoạn code thế này

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-6 p-0" style="height: 100%;">
            <img src="1.jpg" alt="" width="100%" height="100%">
        </div>
        <div class="col-6 d-flex align-items-center bg-right">
            <div class="row px-0">
                <div class="col-3"></div>
                <div class="col-6">
                    <div class="row mb-4">
                        <div class="col-4"></div>
                        <div class="col-4"><img src="colorlib-logo.png" alt="" width="100%" height=""></div>
                        <div class="col-4"></div>
                    </div>
                    <div class="row sub-bg-right p-4">
                        <label for="usernmae" class="">Username or Email address</label>
                        <input type="text" name="" id="username" class="form-control">
                        <label for="password" class="mt-3">password</label>
                        <input type="text" name="" id="password" class="form-control">
                    </div>
                </div>
                <div class="col-3"></div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

thì nó lại có cái thanh scroll bar ở bên phải em chỉnh hoài mà không được , có bạn nào biết không giúp mình với

image
image1366×728 172 KB

#2

thêm dòng này vào css :

::-webkit-scrollbar {
    display: none;
}
#3

với lại thẻ img trong bootstrap 4 bạn nên dùng class .img-fluid để responsive thay vì width:“100%” height:100%

#4 
<!DOCTYPE html>

Cái này là của HTML5, nhưng bạn lại xài cái này:

            <img src="1.jpg" alt="" width="100%" height="100%">

Thế rốt cuộc là HTML5 hay HTML4.01?

Bootstrap có sẵn các class h-, vh-… nên không cần dùng các style width, height. img thì dùng img-fluid…

Với cả khi làm bootstrap thì mình thích dùng padding hơn margin, vì margin dễ làm ảnh hưởng đến col.

3 Likes
#5

mình thấy cái img-fluid là lấy 100% width của cái ảnh, còn mình dùng width là lấy 100% width của cái col-6 chứa ảnh, mình muốn 1 nữa màng hình của mình có ảnh còn 1 nữa còn lại là cái form đăng nhập, nhưng không hiểu sao cái ảnh nó mà để img-fluid thì nó lại nhỏ, còn để width 100% thì nó lại dài quá thành ra cái web phải kéo lên kéo xuống trong khi cái màng hình này thì cần gì kéo lên kéo xuống

#6

<img src="1.jpg" alt="" class="img-fluid">

#7

À, thế là do cái ảnh quá cao so với cái div. Cái div bạn nghiên cứu overflow-hidden nha

3 Likes
83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?