我怎样才能让你喜欢这样的中心和背景图像？ css 引导程序

Question

我的代码

<div style="background-image: url('{{ asset('img/background-line.svg') }}')">
    <div class="row my-10 justify-content-center">
        <div class="col-auto">
            <div class="card border-0 rounded-0 rounded-top">
                <div class="card-body py-5">
                    <ul class="breadcrumb my-0 fs-5 breadcrumb-transparent font-weight-bold p-0">
                        <li class="breadcrumb-item">
                            <a href="#" class="text-muted"><i class="fa fa-home"></i></a>
                        </li>
                        <li class="breadcrumb-item">
                            <a href="#" class="text-muted">Layanan Investasi</a>
                        </li>
                        <li class="breadcrumb-item">
                            <a href="#" class="text-muted">Sektor Aneka ET</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

我怎样才能让你喜欢这个中心和背景图像？ css bootsrap 以便 Bradcome 固定中心

Answer 1

试试下面的代码。您需要通过 css.

手动移除底部边框半径

.breadcrumb {
  border-bottom-left-radius: 0!important;
  border-bottom-right-radius: 0!important;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div style="background-image: url('https://picsum.photos/1000')">
    <div class="row justify-content-center">
        <div class="col-auto">
            <div class="card border-0 rounded-0 bg-transparent">
                <div class="card-body mt-5 p-0">
                    <ul class="breadcrumb my-0 fs-5 breadcrumb-transparent font-weight-bold py-3 px-5">
                        <li class="breadcrumb-item">
                            <a href="#" class="text-muted"><i class="fa fa-home"></i></a>
                        </li>
                        <li class="breadcrumb-item">
                            <a href="#" class="text-muted">Layanan Investasi</a>
                        </li>
                        <li class="breadcrumb-item">
                            <a href="#" class="text-muted">Sektor Aneka ET</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 2

使用class="card-body mt-5 p-0"代替class="card-body py-5"

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div style="background-image: url('https://www.freecodecamp.org/news/content/images/2021/06/w-qjCHPZbeXCQ-unsplash.jpg')">
    <div class="row justify-content-center">
        <div class="col-auto">
            <div class="card border-0 rounded-0 bg-transparent">
                <div class="card-body mt-5 p-0">
                    <ul class="breadcrumb my-0 fs-5 breadcrumb-transparent font-weight-bold py-3 px-5">
                        <li class="breadcrumb-item">
                            <a href="#" class="text-muted"><i class="fa fa-home"></i></a>
                        </li>
                        <li class="breadcrumb-item">
                            <a href="#" class="text-muted">Layanan Investasi</a>
                        </li>
                        <li class="breadcrumb-item">
                            <a href="#" class="text-muted">Sektor Aneka ET</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

我怎样才能让你喜欢这样的中心和背景图像？ css 引导程序

how can i make you like this in center and background image? css bootsrap

html

css

bootstrap-4