Html 使用多个标记Bootstrap4水平对齐内部列_Html_Css_Bootstrap 4_Html5 Canvas

Html 使用多个标记Bootstrap4水平对齐内部列

html css bootstrap-4 html5-canvas

Html 使用多个标记Bootstrap4水平对齐内部列,html,css,bootstrap-4,html5-canvas,Html,Css,Bootstrap 4,Html5 Canvas,我的手指有问题我只在循环中使用标签和： <div class="container-fluid"> <div class="row"> <div class="col-sm-12 view-waid"> <a href="#"> <img src="https://www.chd4.com/uni-thumbs/c

我的手指有问题

我只在循环中使用标签和：

    <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>

这只不过是个好主意但是当我插入这个

    <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>

    <!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>


☰
搜寻

广告
子菜单
幻灯片放映
ADS-1
请刊登广告

ADS-2
请做广告

ADS-3
请做广告

ADS-4
我的考试不好
||
版权及副本；Example.com 2015
//初始化工具提示组件
$（函数（）{
$（'[data toggle=“tooltip”]'）。tooltip（）
})
//初始化popover组件
$（函数（）{
$（'[data toggle=“popover”]'）。popover（）
})

根据您的代码，只需在

col-sm-12

旁边添加class

row

或

d-flex

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

.row{
显示器：flex；
柔性包装：包装；
}

演示

.row{
显示器：flex；
柔性包装：包装；
}

好的。。。等一下，我会试试flex和row，它们都不起作用。我的代码基于你的html，那么我无法帮助你进一步。你只需要使用另一个CSS链接。。。我有一个不同的CSS@AsifUzZaman请查看最新更新答案你的问题解决了吗？@MaxiGui没有。。。我只是编辑我的帖子。。。。我提交我的完整代码。请现在检查。。。。自下而上。@MaxiGui。。。。。。。。好消息，它起作用了。。。。谢谢你。。。。。这就是证明。请检查图像