【问题标题】:How to align images in a row in bootstrap如何在引导程序中连续对齐图像
【发布时间】:2016-08-15 01:39:34
【问题描述】:

嘿,我正在以 col-md-2 间距连续对齐 5 个图像。但我想对齐页面中间的行。谁能帮助我如何达到这一行?

我刚刚尝试了偏移量。但它不能正常工作。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container">
    <div class="row">
        <div class="col-md-2 col-md-offset-1">
            <img src="images/symbol1.png" alt="step 1">
        </div>
        <div class="col-md-2">
            <img src="images/symbol2.png" alt="step 1">
        </div>
         <div class="col-md-2">
            <img src="images/symbol3.png" alt="step 1">
        </div>
         <div class="col-md-2">
            <img src="images/symbol4.png" alt="step 1">
        </div>
         <div class="col-md-2">
            <img src="images/symbol5.png" alt="step 1">
        </div>
    </div>
</div>

【问题讨论】:

  • 你说the offset col is not working properly是什么意思?

标签: html css twitter-bootstrap-3 text-align


【解决方案1】:

这就是你要找的东西?

   <div class="container" style="width: 50%">
        <div class="row" align="center">
            <div class="col-md-2 col-md-offset-1">
                <img src="images/symbol1.png" alt="step 1">
            </div>
            <div class="col-md-2">
                <img src="images/symbol2.png" alt="step 1">
            </div>
             <div class="col-md-2">
                <img src="images/symbol3.png" alt="step 1">
            </div>
             <div class="col-md-2">
                <img src="images/symbol4.png" alt="step 1">
            </div>
             <div class="col-md-2">
                <img src="images/symbol5.png" alt="step 1">
            </div>
        </div>
    </div>

【讨论】:

    【解决方案2】:

    您可以使用 Bootstrap 的alignment classes。只需将.text-center 类添加到该行即可。

    请检查结果:

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    
    <div class="container">
        <div class="row text-center">
            <div class="col-md-2 col-md-offset-1">
                <img src="//placehold.it/100x100/c69/f9c/?text=1" alt="step 1">
            </div>
            <div class="col-md-2">
                <img src="//placehold.it/100x100/9c6/cf9/?text=2" alt="step 1">
            </div>
             <div class="col-md-2">
                <img src="//placehold.it/100x100/69c/9cf/?text=3" alt="step 1">
            </div>
             <div class="col-md-2">
                <img src="//placehold.it/100x100/c69/f9c/?text=4" alt="step 1">
            </div>
             <div class="col-md-2">
                <img src="//placehold.it/100x100/9c6/cf9/?text=5" alt="step 1">
            </div>
        </div>
    </div>

    【讨论】:

      猜你喜欢
      • 2018-12-15
      • 2016-03-30
      • 2020-02-04
      • 2012-06-08
      • 2013-09-17
      • 2014-07-21
      • 2015-11-24
      • 2021-12-26
      • 2019-09-19
      相关资源
      最近更新 更多