bootstrap - 对齐 div 中的列

2024-05-20 • 问答

我是目前正在从事一个项目的大学学生。我正在尝试创建一个左侧有多个图像、右侧有文本和一个按钮的 div。我遇到的问题是元素没有对齐。我为此使用了引导程序类。

下面的图片是我当前的输出以及我想要实现的目标。

这是代码：

<style>
   #points{display:block;}
</style>
<div class="row" style="border:black solid 2px;">
  <div class="col-8">
     <img class="img-responsive" src="http://placehold.it/450x250" />
    <div class="row">
      <div class="col-3"> <img class="img-responsive" src="http://placehold.it/210x150" /></div>
      <div class="col-3"> <img class="img-responsive" src="http://placehold.it/210x150" /> </div>
    </div>
  </div>
   <div class="col-4" >
       <div class="property-wrap">
            <div class="text">
              <h3><a href="#">Name </a></h3> 
              <ul class="property_list mt-3 mb-0">
                <li><span class="flaticon-bed"></span>3</li>
                <li><span class="flaticon-bathtub"></span>2</li>
                <li><span class="flaticon-blueprint"></span>1,878 sqft</li>
              </ul>
            </div>
           <div class="text">
               <p>This here is some sample text. This is going to be a mini paragraph. This here is some sample text. This is going to be a mini paragraph. This here is some sample text. This is going to be a mini paragraph. </p>
               <ul > 
                <li id="points">test</li>
                <li id="points">test</li>
                <liid="points">test</li>
                <li id="points" >test</li>
               </ul>
               <a class="btn btn-primary" href="#!">View More →</a>
           </div>
          </div>
        
        </div>
</div>

我正在尝试扩大文本 div 的宽度，使其位于图像旁边。（我认为这也会缩小整个 div - 我想要图像的大小）。

有人能指出我正确的方向吗？

编辑：尝试答案中的代码后我的页面现在看起来像这样

它看起来更好，但我想浓缩它 - 请参阅我添加的蓝线。

这是更新的代码

<div class="row" style="border: red 2px solid; margin: 50px;padding: 10px">
    <div class="col-8">
        <div class="row" style="border: yellow 2px solid; padding: 2px">
            <div class="col-12">
                <img class="img-responsive" src="instagram.jpg" />
            </div>
        </div>
        <div class="row">
            <div class="col-6" style="border: yellow 2px solid; padding: 2px"> <img class="img-responsive" src="product.jpg" /></div>
            <div class="col-6" style="border: yellow 2px solid; padding: 2px"> <img class="img-responsive" src="product.jpg" /> </div>
        </div>
    </div>
    <div class="col-4" style="border: gray 2px solid; padding: 2px">
        <div class="property-wrap">
            <div class="text">
                <h3><a href="#">Name </a></h3>
                <ul class="property_list mt-3 mb-0">
                    <li><span class="flaticon-bed"></span>3</li>
                    <li><span class="flaticon-bathtub"></span>2</li>
                    <li><span class="flaticon-blueprint"></span>1,878 sqft</li>
                </ul>
            </div>
            <div class="text">
                <p>This here is some sample text. This is going to be a mini paragraph. This here is some sample text.
                    This is going to be a mini paragraph. This here is some sample text. This is going to be a mini
                    paragraph. </p>
                <ul>
                    <li id="points">test</li>
                    <li id="points">test</li>
                    <liid="points">test</li>
                        <li id="points">test</li>
                </ul>
                <a class="btn btn-primary" href="#!">View More →</a>
            </div>
        </div>

    </div>

</div>

haomeng228 回答：bootstrap - 对齐 div 中的列

试试这个，希望对你有用

 img{max-width: 100%; width: 100%;  border:yellow 2px solid}
 .outer{ border:red 2px solid}
 .right_text{border: gray 2px solid; padding: 15px}

<!DOCTYPE html>
<html lang="en">
<head>
  <title></title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>

<div class="container outer">
  <div class="row">
  
    <div class="col-sm-6">
      <div class="row">
        <div class="col-sm-12 my-3">
            <img src="https://i.pinimg.com/originals/3b/24/c7/3b24c709566eaab86b97a99b9c084c4c.png">
        </div>
        <div class="col-sm-6">
            <img src="https://i.pinimg.com/originals/3b/24/c7/3b24c709566eaab86b97a99b9c084c4c.png">
        </div>
        <div class="col-sm-6">
            <img src="https://i.pinimg.com/originals/3b/24/c7/3b24c709566eaab86b97a99b9c084c4c.png">
        </div>
      </div>
    </div>
</body>
</html>
    
    <div class="col-sm-6 my-3">
    <div class="right_text">
      <h3>TEXT COLUMN</h3>
      <p>Lorem ipsum dolor sit amet,consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris... Ut enim ad minim veniam,.</p>
      <button type="button" class="btn btn-success">Success</button>
    </div>
    </div>
    
</div>

如有疑问请留言

这是示例

<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<style>
    #points {
        display: block;
    }
</style>
<div class="row" style="border: red 2px solid; margin: 50px;padding: 10px">
    <div class="col-8">
        <div class="row" style="border: yellow 2px solid; padding: 2px">
            <div class="col-12">
                <img class="img-responsive" src="http://placehold.it/450x250" />
            </div>
        </div>
        <div class="row">
            <div class="col-6" style="border: yellow 2px solid; padding: 2px"> <img class="img-responsive" src="http://placehold.it/210x150" /></div>
            <div class="col-6" style="border: yellow 2px solid; padding: 2px"> <img class="img-responsive" src="http://placehold.it/210x150" /> </div>
        </div>
    </div>
    <div class="col-4" style="border: gray 2px solid; padding: 2px">
        <div class="property-wrap">
            <div class="text">
                <h3><a href="#">Name </a></h3>
                <ul class="property_list mt-3 mb-0">
                    <li><span class="flaticon-bed"></span>3</li>
                    <li><span class="flaticon-bathtub"></span>2</li>
                    <li><span class="flaticon-blueprint"></span>1,878 sqft</li>
                </ul>
            </div>
            <div class="text">
                <p>This here is some sample text. This is going to be a mini paragraph. This here is some sample text.
                    This is going to be a mini paragraph. This here is some sample text. This is going to be a mini
                    paragraph. </p>
                <ul>
                    <li id="points">test</li>
                    <li id="points">test</li>
                    <liid="points">test</li>
                        <li id="points">test</li>
                </ul>
                <a class="btn btn-primary" href="#!">View More →</a>
            </div>
        </div>

    </div>
</div>

bootstrap-4 css html

本文链接：https://www.f2er.com/25074.html

bootstrap - 对齐 div 中的列

haomeng228 回答：bootstrap - 对齐 div 中的列

大家都在问