如何分割部分HTML (BOOTSTRAP)

Question

我需要将我的部分水平分成3部分，在每个部分(居中)放置一个IMG，并写下一些文字。应该如下所示：

感谢你阅读这篇c：

pd:英语不是我的第一篇长文，所以如果能写得尽可能简单，我会很感激的。pd2:我是HTML语言的新手

下面是我的示例代码：

<div class="container">
    <section class="row">
        <article class="col-xs-12">
            <h2>Welcome to my first HTML website</h2>
            <p>This is a lot of text</p>
        </article>  
        <section class="row">
            <div>
                <div class="">
                    <img src="images/icon-mantencion.png"  width="100" height="100">
                    <img src="images/icono-reparacion.png"  width="100" height="100">
                    <img src="images/icon-moderniza.png"  width="100" height="100">
                </div>
            </div>
        </section>  
    </section>
</div>

我的代码中的问题是:我没有写“节”是一个单独的水平空格，然后像“class=col lg-4”那样跳转每个IMG。所以(以前)当我在每个img class=中输入“col lg-4”时，网页认为每个img都是一个单独的水平空间。然后应该看起来像这样：

        <div class="col-xs-12">
            <div class="col-xs-4"><img src="images/icon-mantencion.png"  width="100" height="100"> </div>
            <div class="col-xs-4"> <img src="images/icono-reparacion.png"  width="100" height="100"> </div>
            <div class="col-xs-4"> <img src="images/icon-moderniza.png"  width="100" height="100"> </div>                
        </div>

Answer 1

<div class="container">
    <section class="row">
        <article class="col-xs-12">
            <h2>Welcome to my first HTML website</h2>
            <p>This is a lot of text</p>
        </article>  
        <section class="row">
              <div class="cols-md-4">
                 <img src="images/icon-mantencion.png"  width="100" height="100">
              </div>
              <div class="cols-md-4">
                 <img src="images/icono-reparacion.png"  width="100" height="100">
              </div>
              <div class="cols-md-4">
                 <img src="images/icon-moderniza.png"  width="100" height="100">
              </div>  
        </section>  
    </section>
</div>

Answer 2

在bootstrap中，class="col-xs-12"指的是包含12个相等块的单个块。

根据您的要求，您希望创建三个相等的块，因此使用class="col-xs-4"将12个块划分为3个相等的块

<div class="container">
    <section class="row">
        <article class="col-xs-12">
            <h2>Welcome to my first HTML website</h2>
            <p>This is a lot of text</p>
        </article>  
        <section class="row">
                <div class="col-xs-4"><img src="images/icon-mantencion.png"  width="100" height="100"> </div>
                <div class="col-xs-4"> <img src="images/icono-reparacion.png"  width="100" height="100"> </div>
                <div class="col-xs-4"> <img src="images/icon-moderniza.png"  width="100" height="100"> </div> 
        </section>  
    </section>
</div>