文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >使用多个标签Bootstrap4在列内水平对齐

问使用多个标签Bootstrap4在列内水平对齐
EN

Stack Overflow用户
提问于 2021-05-06 04:12:01
回答 1查看 37关注 0票数 0

我有一个< finger >< img >< figcaption >的问题...！

为什么我在:的循环中只使用标记和< img >

代码语言：javascript
复制
    <div class="container-fluid">
    <div class="row">

<div class="col-sm-12 view-waid">


    <a href="#">
    <img src="https://www.chd4.com/uni-thumbs/c1abc5891b5ba4dde2431d3730a95ffea9cc3f66.jpg" width="200" height="252" />
    </a>
    <a href="#">
    <img src="https://www.chd4.com/uni-thumbs/c1abc5891b5ba4dde2431d3730a95ffea9cc3f66.jpg" width="200" height="252" />
    </a>

它只是工作的很好的视图

但是当我插入这个

代码语言：javascript
复制
    <div class="container-fluid">
    <div class="row">
<div class="col-sm-12 view-waid">
    <a href="#">
    <figure>
    <img src="https://www.chd4.com/uni-thumbs/c1abc5891b5ba4dde2431d3730a95ffea9cc3f66.jpg" width="200" height="252" />
    <figcaption>
    <h4>MYMYMY</h4>
    </figcaption>
    </figure>
    </a>
    <a href="#">
    <figure>
    <img src="https://www.chd4.com/uni-thumbs/c1abc5891b5ba4dde2431d3730a95ffea9cc3f66.jpg" width="200" height="252" />
    <figcaption>
    <h4>MYMYMY</h4>
    </figcaption>
    </figure>
    </a>
</div>

它就这样断成了垂直的。看这里

​

我需要这个水平像一个图片库。

问题出在哪里？我没有使用额外的CSS。

这是我的完整代码

代码语言：javascript
复制
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title><tag:main_title /></title>
    <!-- Bootstrap 4 CSS. This is for the alpha 3 release of Bootstrap 4. This should be updated when Bootstrap 4 is officially released. -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" integrity="sha384-MIwDKRSSImVFAZCVLtU0LMDdON6KVCrZHyVQQj6e8wIEJkW4tvwqXrbMIya1vriY" crossorigin="anonymous">
    <!-- Custom CSS: You can use this stylesheet to override any Bootstrap styles and/or apply your own styles -->
    <link href="http://192.168.0.103/style/mynew_1.0/css/custom.css" rel="stylesheet">
    <!-- For icons -->
    <link href="http://192.168.0.103/style/mynew_1.0/css/font-awesome-4.6.3/css/font-awesome.min.css" rel="stylesheet">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --><!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
    <!-- Navigation -->
    <nav id="topNav" class="navbar navbar-full navbar-fixed-top navbar-dark bg-inverse m-b-1">
        <button class="navbar-toggler hidden-md-up pull-right" type="button" data-toggle="collapse" data-target="#navbar">
            &#9776;
        </button>
        <a class="navbar-brand" href="#"><tag:site_name /></a>
        <div class="collapse navbar-toggleable-sm" id="navbar">
            <tag:main_dropdown />
            <!-- Search -->
            <form class="form-inline pull-xs-right">
                <input class="form-control" type="text" placeholder="Search">
                <button class="btn btn-secondary" type="submit">Search</button>
            </form>
            </ul>
        </div>
    </nav>
<header>
<div class="header-blurb">
<div class="container">
<div class="row">
<tag:main_header />
</div>
<div class="row">
<div class="col-sm-12 header-blurb-ads">
<h6>ads</h6>
</div>
</div>
<div class="row">
<div class="col-sm-12 header-blurb-ssmenu">
<h6>sub-menu</h6>
</div>
</div>
<div class="row">
<div class="col-sm-12 header-blurb-slideshow">
<h6>slide-show</h6>
</div>
</div>
</div>
</div>
</header>    
<div class="container-fluid">
<div class="row">
        <!-- Left Column -->
        <div class="col-sm-1 view-waid">
        <tag:main_left />
        </div>
        <!-- /Left Column --> 
        <!-- Center Column -->
        <div class="col-sm-8 view-waid">
            <!-- Articles -->
            <tag:main_content />
            <!-- Img test 2 -->
    <!-- Img test 2 -->
        </div>  
        <!-- /Center Column-->
      <!-- Right Column -->
      <div class="col-sm-3 view-waid">
        <tag:main_right />
      </div> <!-- /Right Column -->
</div>
    </div>
    <!--/container-fluid-->
    <!-- Image box testing -->
    <div class="container-fluid">
        <div class="row">
    <div class="col-sm-12 d-flex view-waid">
        <a href="#">
        <figure>
        <img src="https://www.chd4.com/uni-thumbs/c1abc5891b5ba4dde2431d3730a95ffea9cc3f66.jpg" width="200" height="252" />
        <figcaption>
        <h4>MYMYMY</h4>
        </figcaption>
        </figure>
        </a>
        <a href="#">
        <figure>
        <img src="https://www.chd4.com/uni-thumbs/c1abc5891b5ba4dde2431d3730a95ffea9cc3f66.jpg" width="200" height="252" />
        <figcaption>
        <h4>MYMYMY</h4>
        </figcaption>
        </figure>
        </a>
    </div>
</div>
</div>
<!-- /Image box testing -->
    <footer>
        <div class="footer-blurb">
            <div class="container">
                <div class="row">
                    <div class="col-sm-3 footer-blurb-item">
                        <h3><i class="fa fa-text-height" aria-hidden="true"></i> ADS-1</h3>
                        <p>PLEASE GIVE ADS</p>
                        <p><a class="btn btn-primary" href="#">FOR SHOW</a></p>
</div>
<div class="col-sm-3 footer-blurb-item">
    <h3><i class="fa fa-wrench" aria-hidden="true"></i> ADS-2</h3>
                        <p>PLEASE GIVE ADS -- 2 </p>
                        <p><a class="btn btn-success" href="#">FOR SHOW - 2</a></p>
    </div>
        <div class="col-sm-3 footer-blurb-item">
                <h3><i class="fa fa-paperclip" aria-hidden="true"></i> ADS-3</h3>
                <p>PLEASE GIVE ADS -- 3</p>
                        <p><a class="btn btn-primary" href="#">FOR SHOW - 3</a></p>
        </div>
            <div class="col-sm-3 footer-blurb-item">
                        <!-- Thumbnails --> 
                        <h3><i class="fa fa-camera" aria-hidden="true"></i> ADS-4</h3>
        <div class="row">
        <div class="col-xs-6">
        <a href="#" class="img-fluid">
        <img src="holder.js/110x80?theme=vine" alt="">
                                    </a>
                                </div>
                                <div class="col-xs-6">
                                    <a href="#" class="img-fluid">
                                        <img src="holder.js/110x80?theme=sky" alt=""></a>
        </div>
            <div class="col-xs-6">
                    <a href="#" class="img-fluid">
        <img src="holder.js/110x80?theme=sky" alt="">
                                    </a>
                                </div>
                                <div class="col-xs-6">
                                    <a href="#" class="img-fluid">
                <img src="holder.js/110x80?theme=vine" alt="">
                                    </a>
                                </div>
                            </div>
                    </div> 
                </div>
                <!-- /.row -->
                <h4>MY-Test_IS NOT GOOD</h4>
            </div>
        </div>
        <div class="small-print">
            <div class="container">
                <p><a href="#">Terms &amp; Conditions</a> | <a href="#">Privacy Policy</a> | <a href="#">Contact</a></p>
                <p>Copyright &copy; Example.com 2015 </p>
            </div>
        </div>
    </footer>
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script>
    <!-- Tether -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>
    <!-- Bootstrap 4 JavaScript. This is for the alpha 3 release of Bootstrap 4. This should be updated when Bootstrap 4 is officially released. -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/js/bootstrap.min.js" integrity="sha384-ux8v3A6CPtOTqOzMKiuo3d/DomGaaClxFYdCu2HPMBEkf6x2xiDyJ7gkXU0MWwaD" crossorigin="anonymous"></script>
    <!-- Initialize Bootstrap functionality -->
    <script>
    // Initialize tooltip component
    $(function () {
      $('[data-toggle="tooltip"]').tooltip()
    })
    // Initialize popover component
    $(function () {
      $('[data-toggle="popover"]').popover()
    })
    </script> 
    <!-- Placeholder Images -->
    <script src="js/holder.min.js"></script>
</body>
</html>
html
css
bootstrap-4
html5-canvas
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-05-06 04:45:19

根据您的代码，只需在col-sm-12旁边添加类row或d-flex即可。

根据你的BS链接，只需添加如下CSS：

代码语言：javascript
复制
.row{
  display:flex;
  flex-wrap:wrap;
}

演示

​

代码语言：javascript
复制
.row{
  display:flex;
  flex-wrap:wrap;
}
代码语言：javascript
复制
<link rel="stylesheet" href="maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/…" integrity="sha384-MIwDKRSSImVFAZCVLtU0LMDdON6KVCrZHyVQQj6e8wIEJkW4tvwqXrbMIya1vriY" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-12 row view-waid">
      <a href="#">
        <figure>
          <img src="https://www.chd4.com/uni-thumbs/c1abc5891b5ba4dde2431d3730a95ffea9cc3f66.jpg" width="200" height="252" />
          <figcaption>
            <h4>MYMYMY</h4>
          </figcaption>
        </figure>
      </a>
      <a href="#">
        <figure>
          <img src="https://www.chd4.com/uni-thumbs/c1abc5891b5ba4dde2431d3730a95ffea9cc3f66.jpg" width="200" height="252" />
          <figcaption>
            <h4>MYMYMY</h4>
          </figcaption>
        </figure>
      </a>
    </div>
  </div>
</div>

​

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/67408158

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档