Di bootstrap bagaimana cara menambahkan batas ke baris tanpa menambahkan?
Saya menggunakan bootstrap versi 3.0.1 untuk membuat kisi dan ketika saya menambahkan batas ke baris kisi saya dapat melihat bahwa baris yang bersama-sama menambahkan batas di sana, saya mendapatkan batas yang lebih tebal.
Ini adalah kode saya:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Test</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<style type="text/css">
body {
padding-top: 20px;
padding-bottom: 40px;
}
.container {
width: 420px;
}
div.row {
border: 1px solid;
}
</style>
</head>
<body>
<div class="container">
<div class="row heading">
<div class="col-md-12">Header</div>
</div>
<div class="row subheading">
<div class="col-md-12">Some text</div>
</div>
<div class="row footer">
<div class="col-md-12">Footer</div>
</div>
</div>
</body>
</html>Dan inilah yang saya dapatkan. Bagaimana saya bisa menggunakan batas tanpa baris yang berdampingan menambahkan batas mereka?, yaitu: Saya ingin semua baris dengan batas 1px.
Terima kasih
Anda dapat menghapus batas dari atas jika elemen tersebut adalah saudara kandung dari baris. Tambahkan ini ke css:
.row + .row {
border-top:0;
}Berikut adalah tautan ke biola
Inilah salah satu solusinya:
div.row {
border: 1px solid;
border-bottom: 0px;
}
.container div.row:last-child {
border-bottom: 1px solid;
}Saya tidak 100% yang paling efisien, tetapi berhasil :D
Anda dapat menambahkan batas 1px hanya pada sisi dan bawah setiap baris. nilai pertama adalah batas atas, yang kedua adalah batas kanan, yang ketiga adalah batas bawah, dan yang keempat adalah batas kiri.
div.row {
border: 0px 1px 1px 1px solid;
}
