Html 引导程序4：左侧为Flexbox图像，右侧为文本

我正试图通过column或flexbox在bootstrap中实现以下图像：

基本上，左边必须有一个965 x 678px的图像，右边有浮动的文本，如果你检查下面的小提琴，它就不能正常工作

我尝试使用Flexbox，但它不起作用

这是我的HTML：

<section id="golf">
            <div class="container">
                <div class="d-flex justify-content-start">
                    <div class="menu-image">
                        <img src="https://via.placeholder.com/975x678" class="img-fluid" alt="menu image">
                    </div>
                    <div class="menu-text">
                        <h2 class="main-title text-left">Golf Ter</h2>
                        <hr class="hr-style-left" />
                        <div class="menu-content d-flex space-between">
                            <p class="menu-name">GOlfy</p>
                            <p class="menu-price">$200.00</p>
                        </div>
    
                        <div class="menu-content d-flex space-between">
                            <p class="menu-name">GOlfy</p>
                            <p class="menu-price">$200.00</p>
                        </div>

                        <div class="menu-content d-flex space-between">
                            <p class="menu-name">GOlfy</p>
                            <p class="menu-price">$200.00</p>
                        </div>

                        <div class="menu-content d-flex space-between">
                            <p class="menu-name">Kimbap</p>
                            <p class="menu-price">P200.00</p>
                        </div>
                    </div>
                </div>
            </div>
    </section>

这必须是响应性的w/c意味着当您调整屏幕大小时，图像和文本必须保持在同一位置，并将在移动设备屏幕上彼此相邻堆叠

---

这是jsfiddle，您可以看到实际的代码：

当bootstrap为您提供了实现所需布局的类时，您不需要使用自己的CSS

在下面的代码片段中，我删除了不必要的CSS，并使用bootstrap的网格布局以及flex实用程序类来实现所需的布局

高尔夫{ 边框顶部：3倍纯绿； 底部边框：3倍纯绿； } p、 菜单名， p、 菜价{ 字体大小：1.3rem； }

高尔夫球拍

高尔菲

$200.00
高尔菲

$200.00
高尔菲

$200.00
Kimbap
$200.00

您期望的输出行为到底是什么？增大/减小屏幕大小时，图像会调整大小。您需要什么行为？检查JSFIDLE并查看上图，它们是不同的。我需要图像放在左边，文本放在右边，就像图像一样，当你调整屏幕大小时，它必须是有响应的。如何保持图像的纵横比：它必须是一致的，并占据整个左侧你错过了图像部分的要点。图像应该像这样扩展左侧的整个空间：只需将

.container

类更改为

.fluid container

。这将移除侧面的排水沟。请参阅更新的代码片段。如何控制图像的大小以及在大屏幕上的顶部和底部留有空间？请参见屏幕截图：将

菜单图像

元素上的类

对齐项目中心

更改为

对齐项目开始

。

.menu-container{
  width: 100%;
}


.menu-content{
   margin-top: 1.5rem;
   width: 50%;
}

.menu-text{
    padding: 90px;
    width: 50%;
}

p.menu-name{
    font-size: 1.3rem;
    text-align: left;
    text-transform: uppercase;
    color: #191919;
    font-weight: bold;

}

p.menu-price{
    margin-left: 9rem;
    font-weight: normal;
    color: #191919;
    font-size: 1.3rem;
}