简体   繁体   English

使用引导程序 4 将小部件移动到网页的右侧

[英]Move the widget to the right side of the web page using bootstrap 4

I want the information tag to be at the right side of the web page.我希望信息标签位于网页的右侧。 Rest of the things are in the middle of the page.其余的东西都在页面的中间。 While I am not able to move the information to the right side.虽然我无法将信息移到右侧。 Also, because of it the footer disappeared.此外,由于它,页脚消失了。 While I remove the information code, the footer works.当我删除信息代码时,页脚有效。 Please help me right-align the information widget and also have the footer too.请帮我右对齐信息小部件,也有页脚。

<div class="container">
         <div class="card border-light mb-3 text-center">
            <p class="card-header">Videos</p>
        </div>
         <div id="userSuccess" class="hide" role="alert">
            <div id="successUserContent"></div>
        </div>
        <div class="row" id="userVid"> 
            <?php
            $allVid = Schema::getAll();
            for ($i = 0; $i < count($allVid); $i++) {
                echo <<<HTML
                <div class="col-lg-4 col-md-6 mb-4">
                    <div class="card h-100">  
                        <div class="card-body">
                            <a href="vid.php"><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a>
                            <h4 class="card-title">{$allVid[$i]->getTitle()} </h4>
                        </div> 
                    </div> 
                </div>
    HTML;
            }
            ?>   
        </div>    
        <div class="row">
        <div class="col-md-4 order-md-2 mb-4">
        <div class="card my-4">
                    <h5 class="card-header">Information</h5> 
                    <div class="card-body">  
                        <div class="row">
                                <ul class="list-unstyled mb-0">  
                                    <li>
                                        ...  
                                    </li>
                                </ul>                         
                        </div>
                    </div>        
                </div>
        </div>
        </div> 
    </div>
<?php
require_once './page/footer.php';
?>

For right align, you'll want to add the class of "justify-content-end" after your "row" class.对于右对齐,您需要在“row”类之后添加“justify-content-end”类。

<div class="row justify-content-end"><!-- ADDED HERE-->
  <div class="col-md-4 order-md-2 mb-4">
    <div class="card my-4">
      <h5 class="card-header">Information</h5>
        <!-- REST OF YOUR CODE-->

For your footer, you'll need to wrap your URL in parenthesis.对于页脚,您需要将 URL 括在括号中。

<?php require_once('/yourdirectory/yourfooter.php'); ?>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 使用 bootstrap 布局,右侧有多余的不必要的空间 - Using bootstrap layout and there is extra unnecessary space on right side 移动产品页面右侧栏中的woocommerce产品简短描述和产品数据字段 - Move woocommerce product short description and product data field in right side column of the product page 如何将左侧文本移动到右侧文本字段 - how to move left side text into right side text field 是否可以在不使用服务器端(例如PHP)的情况下制作单个页面的网页? - Is it possible yet to make a single page web page without using server side such as PHP? 客户端网页编辑有问题吗? - Client side web-page editing problems? 仅在Wordpress上为单页更改标题右侧小部件 - Change Header Right widget for single page only on Wordpress 使用 PHP HTML AJAX 动态刷新读取数据库的网页。 是不是正确的方法? - Dynamic refresh of a web page reading a DB using PHP HTML AJAX. Is t the right way? 从页面的一侧向右传递数据? - passing data from one side of the page right to left? 单击链接后如何打开右侧的php页面? - How to open a php page on the right side when I click a link? 在Android Chrome的页面右侧添加了白色的空白区域 - Thin white blank area added to right side of page on Android Chrome
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM