Question

如何让3列无效？他们目前正在分散。

<div class="container container2">
 <div class="row no-gutter">
    <div class="col-md-4">
     <h1>1</h1>
     <p class="description1">elige<br>tu box</p>
      <img class="crop-img" src="img/icono_elige.jpg" alt="delivery" />
     <p class="description">elije entre la</br><b>box mensual</b> o la <b> </br>    box personalizada</b></p>
    </div>

    <div class="col-md-4">
     <h1>2</h1>
      <p class="description1">elige<br>tus snacks</p>
       <img class="crop-img" src="img/icono_snacks.jpg" alt="elige" />
        <p class="description">encuentra mas de<br> <b>80 snacks</b> y<br>agregalos a tu box</p>
    </div>


    <div class="col-md-4">
      <h1>3</h1>
        <p class="description1">pide y<br>recibe</p>
         <img class="crop-img" src="img/icono_delivery.png" alt=elige />
                    <p class="description">para ti, para<br> compartir o para<br>regalar</p>
    </div>
</div>

http://imgur.com/a/UjOlV

顶部 - 我拥有什么

底部 - 我需要什么

感谢您的帮助：）

Answer 1

所有三个方框都有相同的宽度（有些大约33.3333％）。我认为您正在使用text-align: center;将内容放在框的中间。我认为最好的解决方案是让中间盒变小。

您还可以使用col-push和col-pull。

要查找有关此内容的更多信息，请查看http://getbootstrap.com/css/#grid-offsetting。

尝试使用不同大小的列并抵消这些列。

建议修复Bootstrap中的列？

1 个答案: