kzen.dev
Lebih
Question

Bootstrap 4, tambahkan ruang di antara dua deck kartu

Saya mencoba menambahkan ruang di antara dua dek kartu. Saya menggunakan bootstrap 4 alpha 6. Saya tidak tahu mengapa menggunakan mt-20 pada dek kartu kedua tidak akan berhasil. Saya sudah mencoba membungkusnya dalam barisan dan melakukannya, tapi tidak berhasil juga:

masukkan deskripsi gambar di sini

<div>
<div class="container">
            <div class="card-deck">
                <div class="card text-center">
                    <div class="card-block">
                        <h4 class="card-title">Permits</h4>
                        <p class="card-text">
                            Apply for parking permit<br />
                            View existing permit requests<br />
                            Activate Visitor permits<br />
                        </p>
                    </div>
                    <div class="card-footer">
                        @Html.ActionLink("Permits", "Index", "Home", new { Area = "Permit" }, new { @class = "btn btn-primary" })
                    </div>
                </div>

                <div class="card text-center">
                    <div class="card-block">
                        <h4 class="card-title">Vehicles</h4>
                        <p class="card-text">
                            View and manage your vehicles
                        </p>
                    </div>
                    <div class="card-footer">
                        @Html.ActionLink("My Vehicles", "Index", "Vehicle", null, new { @class = "btn btn-primary" })
                    </div>
                </div>

                <div class="card text-center">
                    <div class="card-block">
                        <h4 class="card-title">Parking Tickets</h4>
                        <p class="card-text">
                            View your parking ticket history
                        </p>
                    </div>
                    <div class="card-footer">
                        @Html.ActionLink("My Tickets", "Index", "ParkingTicket", null, new { @class = "btn btn-primary" })
                    </div>
                </div>
            </div>
    <div class="card-deck mt-20">
        <div class="card text-center">
            <div class="card-block">
                <h4 class="card-title">Funding Options</h4>
                <p class="card-text">
                    Add credit/debit card<br />
                    Top up Account<br />
                    Manage cards
                </p>
            </div>
            <div class="card-footer">
                @Html.ActionLink("Funding Options", "Index", "Funding", null, new { @class = "btn btn-primary" })
            </div>
        </div>

        <div class="card text-center">
            <div class="card-block">
                <h4 class="card-title">Account History</h4>
                <p class="card-text">
                    View all financial transactions on my account
                </p>
            </div>
            <div class="card-footer">
                @Html.ActionLink("Account transactions", "Index", "Activity", null, new { @class = "btn btn-primary" })
            </div>
        </div>
        <div class="card text-center">
            <div class="card-block">
                <h4 class="card-title">User Settings</h4>
                <p class="card-text">
                    Edit personal details<br />
                    Change top-up settings<br />
                    Change password
                </p>
            </div>
            <div class="card-footer">
                @Html.ActionLink("Personal details", "Update", "Account", null, new { @class = "btn btn-primary" })
            </div>
        </div>
    </div>
</div>
Robin Mackenzie
Robin Mackenzie
Pertanyaan edit 22 Desember 2017 в 8:39
Pemrograman
css
twitter-bootstrap
bootstrap-4
twitter-bootstrap-4
Solution / Answer

Tidak ada mt-20 di Bootstrap 4. Bootstrap 4 kelas margin adalah...

m{sides}-{size}

Di mana size adalah dari 0-5, dan ukuran adalah bagian dari unit spacer default 1rem

  • 0 - menghilangkan margin
  • 1 - mengatur margin ke .25rem
  • 2 - atur margin ke .5rem
  • 3 - atur margin ke 1rem
  • 4 - atur margin ke 1.5rem
  • 5 - atur margin ke 3rem

Jadi Anda dapat menggunakan mt-3, mt-4, mt-5 dll..

http://www.codeply.com/go/29IGJHkqVd

Zim
Zim
Jawaban edit 24 Mei 2017 в 12:13
37
Anda punya pertanyaan? Tambahkan di situs dan dapatkan jawabannya secara instan
id.kzen.dev

Anda bisa meletakkan jeda baris di bawah kartu: <br />. Atau mungkin menambahkan margin bawah di bawah kelas card-deck:

.card-deck{
    bottom-margin: 10px;
}
1
Anda punya pertanyaan? Tambahkan di situs dan dapatkan jawabannya secara instan
id.kzen.dev
Related communities 3
HTML dan CSS Indonesia
4 051 pengguna
Silahkan bertanya terkait mengenai HTML maupun CSS. Membaca, menulis, berbagi. Baca dahulu pesan tersemat di pinned post.
Pemrograman Web Indonesia (HTML CSS Javascript PHP MySQL)
296 pengguna
Official Website : https://esistemindo.com Belajar Pemrograman Web (HTML CSS Javascript PHP MySQL) Grup Belajar Pemrograman Web. HTML + PHP + Javascript + MySQL DB Semoga menjadi forum belajar, menambah wawasan, peningkatan mutu personal kita semua.
Css Indonesia
11 pengguna
Css Indonesia group ini membahas tentang Css dan web design Bagi yg mau memperdalam Css atau ingin memulai Css atau bahkan Javascript dan html, bisa download aplikasi di bawah ini : https://play.google.com/store/apps/details?id=com.sololearn Thank you