如何使3列中的图像在同一行中显示？

huangapple
go评论63阅读模式
英文:

How to make the images in 3 columns appear in the same line?

问题

我正在尝试在我创建的网站上使用Bootstrap创建一个投资组合部分。然而，当我尝试排列它们时，第三个总是跳到下一行，我不知道如何解决这个问题。请查看我的代码，如下所示：

英文:

I am trying to create a portfolio section on the website that I'm creating, with Bootstrap.

However, when I'm trying to line them up, the third one always jumps to the next line, and I don't know how to solve that.

Please see my code, below:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

&lt;div class=&quot;container-fluid&quot;&gt;
  &lt;div class=&quot;row align-content-center&quot;&gt;

    &lt;div class=&quot;col-lg-4 col-md-6 d-flex&quot;&gt;
      &lt;figure class=&quot;figurefx pushup&quot;&gt;
        &lt;img src=&quot;assets/img/work-sample/hive.jpg&quot; class=&quot;img-fluid&quot; alt=&quot;Hive II&quot;&gt;
        &lt;figcaption&gt;&lt;a href=&quot;&quot;&gt;Hive II&lt;/a&gt;&lt;/figcaption&gt;
      &lt;/figure&gt;
    &lt;/div&gt;

    &lt;div class=&quot;col-lg-4 col-md-6 d-flex&quot;&gt;
      &lt;figure class=&quot;figurefx pushup&quot;&gt;
        &lt;img src=&quot;assets/img/work-sample/jackson.jpg&quot; class=&quot;img-fluid&quot; alt=&quot;Jackson House&quot;&gt;
        &lt;figcaption&gt;&lt;a href=&quot;&quot;&gt;Jackson House&lt;/a&gt;&lt;/figcaption&gt;
      &lt;/figure&gt;
    &lt;/div&gt;
  &lt;/div&gt;

  &lt;div class=&quot;col-lg-4 col-md-6 d-flex&quot;&gt;
    &lt;figure class=&quot;figurefx pushup&quot;&gt;
      &lt;img src=&quot;assets/img/work-sample/p5.jpg&quot; class=&quot;img-fluid&quot; alt=&quot;P5 Residence&quot;&gt;
      &lt;figcaption&gt;&lt;a href=&quot;&quot;&gt;P5 Residence&lt;/a&gt;&lt;/figcaption&gt;
    &lt;/figure&gt;
  &lt;/div&gt;

&lt;/div&gt;
&lt;/div&gt;

<!-- end snippet -->

答案1

得分: 1

以下是您要翻译的内容：

"在您的标记中有一个错误
删除这个div它将工作

请缩进您的代码，您将看到这些类型的错误

祝你好运

<!-- 开始代码片段：js 隐藏：false 控制台：true babel：false -->

<!-- 语言：lang-html -->

&lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot;/&gt;
&lt;div class=&quot;container-fluid&quot;&gt;
  &lt;div class=&quot;row align-content-center&quot;&gt;    
    
    &lt;div class=&quot;col-lg-4 col-md-6 d-flex&quot;&gt;    
      &lt;figure class=&quot;figurefx pushup&quot;&gt;
        &lt;img src=&quot;assets/img/work-sample/hive.jpg&quot; class=&quot;img-fluid&quot; alt=&quot;Hive II&quot; /&gt;        
        &lt;figcaption&gt;
          &lt;a href=&quot;&quot;&gt;Hive II&lt;/a&gt;
        &lt;/figcaption&gt;    
      &lt;/figure&gt;    
    &lt;/div&gt;    

    &lt;div class=&quot;col-lg-4 col-md-6 d-flex&quot;&gt;    
      &lt;figure class=&quot;figurefx pushup&quot;&gt;        
        &lt;img src=&quot;assets/img/work-sample/jackson.jpg&quot; class=&quot;img-fluid&quot; alt=&quot;Jackson House&quot;&gt;
        &lt;figcaption&gt;
          &lt;a href=&quot;&quot;&gt;Jackson House&lt;/a&gt;
        &lt;/figcaption&gt;    
      &lt;/figure&gt;    
    &lt;/div&gt;    
    &lt;!-- 删除闭合的div --&gt;
    &lt;!-- &lt;/div&gt; --&gt;

    &lt;div class=&quot;col-lg-4 col-md-6 d-flex&quot;&gt;    
      &lt;figure class=&quot;figurefx pushup&quot;&gt;        
        &lt;img src=&quot;assets/img/work-sample/p5.jpg&quot; class=&quot;img-fluid&quot; alt=&quot;P5 Residence&quot;&gt;
        &lt;figcaption&gt;
          &lt;a href=&quot;&quot;&gt;P5 Residence&lt;/a&gt;
        &lt;/figcaption&gt;    
      &lt;/figure&gt;    
    &lt;/div&gt;

  &lt;/div&gt;
&lt;/div&gt;

<!-- 结束代码片段 -->
"

英文:

There is an error in your markup
Delete this div and it will work

Please indent your code and you will see these kind of mistakes

Good luck

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

&lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot;/&gt;
&lt;div class=&quot;container-fluid&quot;&gt;
  &lt;div class=&quot;row align-content-center&quot;&gt;    
    
    &lt;div class=&quot;col-lg-4 col-md-6 d-flex&quot;&gt;    
      &lt;figure class=&quot;figurefx pushup&quot;&gt;
        &lt;img src=&quot;assets/img/work-sample/hive.jpg&quot; class=&quot;img-fluid&quot; alt=&quot;Hive II&quot; /&gt;        
        &lt;figcaption&gt;
          &lt;a href=&quot;&quot;&gt;Hive II&lt;/a&gt;
        &lt;/figcaption&gt;    
      &lt;/figure&gt;    
    &lt;/div&gt;    

    &lt;div class=&quot;col-lg-4 col-md-6 d-flex&quot;&gt;    
      &lt;figure class=&quot;figurefx pushup&quot;&gt;        
        &lt;img src=&quot;assets/img/work-sample/jackson.jpg&quot; class=&quot;img-fluid&quot; alt=&quot;Jackson House&quot;&gt;
        &lt;figcaption&gt;
          &lt;a href=&quot;&quot;&gt;Jackson House&lt;/a&gt;
        &lt;/figcaption&gt;    
      &lt;/figure&gt;    
    &lt;/div&gt;    
    &lt;!-- removed closing div --&gt;
    &lt;!-- &lt;/div&gt; --&gt;

    &lt;div class=&quot;col-lg-4 col-md-6 d-flex&quot;&gt;    
      &lt;figure class=&quot;figurefx pushup&quot;&gt;        
        &lt;img src=&quot;assets/img/work-sample/p5.jpg&quot; class=&quot;img-fluid&quot; alt=&quot;P5 Residence&quot;&gt;
        &lt;figcaption&gt;
          &lt;a href=&quot;&quot;&gt;P5 Residence&lt;/a&gt;
        &lt;/figcaption&gt;    
      &lt;/figure&gt;    
    &lt;/div&gt;

  &lt;/div&gt;
&lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年5月11日 05:47:09
  • 转载请务必保留本文链接：https://go.coder-hub.com/76222761.html
  • css
  • html
  • web
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定