时间戳

首页 > 解决方案 > bootstrap 4显示flex示例不起作用

bootstrap-4 - bootstrap 4显示flex示例不起作用

问题描述

我有一个这样的psd，我想这样设计。

psd

但我看到了这个演示

演示

<div class="col-6">
    <div class="media border-2 border-secondary border-solid p-1">
        <div class="d-flex justify-content-between">
            <img src="https://i.pinimg.com/564x/51/f6/fb/51f6fb256629fc755b8870c801092942.jpg" class="mr-1 rounded-circle w-25 h-25">
            <div class="media-body">
                <span class="h5 mr-2">رضا امیری</span>
                <span class="small">5 روز پیش</span>
            </div>
            <div class="row">
                <i class="fas fa-user"></i>
                <i class="fas fa-user"></i>
                <i class="fas fa-user"></i>
            </div>
            <div>
                <a href="#">
                    <img src="/uploads/images/arrow-left.png">
                </a>
            </div>
        </div>
        <div class="border-top">
            <p>آدرس: خیابان تختی</p>
            <a class="bg-primary" href="#">نقشه</a>
        </div>
        <div class="d-flex justify-content-between">
            <div>
                <a href="#">امتیاز مشتریان: 2 تا </a>
            </div>
            <div>
                <a href="#">55000 تومان</a>
            </div>
        </div>
    </div>
</div>

不管我怎么想，这是怎么做到的，我不知道。

我正在创建一个简单的 Express Web 服务器，它提供使用引导程序制作的登录页面，但我无法让任何 Flexbox 示例正常工作。

标签： bootstrap-4

解决方案

使用 Bootstrap 时，从一个容器开始，构建一系列行和列，根据需要添加 padding 和 margin 以获得所需的间距。

<link href="https://cdn.rtlcss.com/bootstrap/v4.5.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>

<style>
    .rounded-1rem {
        border-radius: 1rem;
    }

    .icon-link {
        color: rgba(0,0,0,0.60);
    }

    .icon-link:hover {
        color: rgba(0,0,0,0.87);
    }

    .bg-light-gray {
        color: rgba(0,0,0,0.87);
        background-color: #C4C4C4;
    }
</style>

<div class="container-fluid" dir="rtl">
    <div class="row justify-content-center mt-5">
        <div class="col-12 col-sm-8 col-md-6 col-lg-4 col-xl-3 px-3 border rounded-1rem">
            <div class="row no-gutters py-3">
                <div class="col-3">
                    <img src="https://i.pinimg.com/564x/51/f6/fb/51f6fb256629fc755b8870c801092942.jpg" class="img-fluid">
                </div>
                <div class="col-8 pl-3">
                    <div class="row pb-3">
                        <div class="col">
                            <span class="h5">رضا امیری</span>
                            <span class="small">5 روز پیش</span>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <a href="#" class="link-secondary icon-link pl-1"><i class="fas fa-user"></i></a>
                            <a href="#" class="link-secondary icon-link pl-1"><i class="fas fa-comment-dots"></i></a>
                            <a href="#" class="link-secondary icon-link pl-1"><i class="fas fa-trash-alt"></i></a>
                        </div>
                    </div>
                </div>
                <div class="col-1 text-right">
                    <a href="#">
                        <i class="fas fa-arrow-left fa-lg text-dark"></i>
                    </a>
                </div>
            </div>
            <div class="row no-gutters pb-3">
                <div class="col border-top pt-3">
                    <div class="">
                        <p>آدرس: خیابان تختی</p>
                        <a class="btn bg-light-gray" href="#"><i class="fas fa-map fa-sm"></i> نقشه </a>
                    </div>
                </div>
            </div>
            <div class="row no-gutters pb-3">
                <div class="col border-top pt-3">
                    <a href="#" class="float-left">امتیاز مشتریان: 2 تا </a>
                    <a href="#" class="float-right">55000 تومان</a>
                </div>
            </div>
        </div>
    </div>
</div>

我没有看到任何需要 flex 来控制定位的东西。我确实在最后一节中使用float-leftandfloat-right来获取左侧和右侧的文本。您可以使用 flex 来做到这一点，但浮动似乎更容易。

我使用Bootstrap RTL而不是标准的 Bootstrap 来支持从右到左的布局。如果您不需要支持 Internet Explorer，您可能需要考虑使用 Bootstrap 5，它具有RTL支持作为标准。

推荐阅读