我正在尝试通过列或flexbox在下面的引导中实现此图像:
基本上,左边必须有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>
这是CSS:
.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;
}
这必须是响应性的,w / c表示在调整屏幕大小时,图像和文本必须仍在同一位置,并且将在移动设备屏幕上紧挨着堆叠。
这是jsfiddle,因此您可以看到实际的代码:https://jsfiddle.net/L23zqn5x/1/
答案 0 :(得分:1)
当bootstrap为您提供类以实现所需的布局时,您无需使用自己的CSS。
在下面的代码片段中,我删除了不必要的CSS,并使用了bootstrap的网格布局以及flex实用程序类来实现所需的布局。
#golf {
border-top: 3px solid green;
border-bottom: 3px solid green;
}
p.menu-name,
p.menu-price {
font-size: 1.3rem;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<section id="golf">
<div class="fluid-container">
<div class="row no-gutters">
<div class="col-md">
<div class="menu-image h-100 d-flex align-items-start">
<img src="https://via.placeholder.com/975x678" class="img-fluid" alt="menu image">
</div>
</div>
<div class="col-md">
<div class="menu-text flex-grow-1 py-4 px-5">
<h2 class="main-title text-left">Golf Ter</h2>
<hr class="hr-style-left" />
<div class="menu-content d-flex justify-content-between">
<p class="menu-name text-uppercase font-weight-bold">GOlfy</p>
<p class="menu-price">$200.00</p>
</div>
<div class="menu-content d-flex justify-content-between">
<p class="menu-name text-uppercase font-weight-bold">GOlfy</p>
<p class="menu-price">$200.00</p>
</div>
<div class="menu-content d-flex justify-content-between">
<p class="menu-name text-uppercase font-weight-bold">GOlfy</p>
<p class="menu-price">$200.00</p>
</div>
<div class="menu-content d-flex justify-content-between">
<p class="menu-name text-uppercase font-weight-bold">Kimbap</p>
<p class="menu-price">$200.00</p>
</div>
</div>
</div>
</div>
</div>
</section>