javascript - 在 Bootstrap 中更改断点处的元素位置

Question

我正在 Bootstrap 中制作页脚，其中包含功能、关于、FQS、联系我们和 Logo 图像(隐藏版权)等链接。

对于大屏幕，链接和 Logo 图像等元素的位置很好。但是对于中等屏幕，“链接”开始垂直显示，而不是水平显示，并且 Logo 图像向下移动链接，如您在提供的图片中所观察到的那样。这里我想要 2 个更改。

1) 即使在中小屏幕上，链接也必须水平显示。

2) 一旦到达断点，元素应交换位置。( Logo 图像应显示在链接的位置，反之亦然)。

代码:

   <div class="container-fluid">
        <div class="container">
            <div class="row">

                    <div class="form-group">
                        <div class="col-md-12">
                            <h5 align="center" class="copyRightFooterH">BF2F</h5>
                        </div>
                    </div>

                    <div class="form-group">
                    <div class="col-md-12">

                            <div class="col-md-2">
                                    <h3 id="FH"><a class="Features">Features</a></h3>
                                    </br>
                                    <a href="About.php" class="about">About</a>
                            </div>
                            <div class="col-md-2">
                                    <h3 id="FH"><a class="FQS">FQS</a></h3>
                                    </br>
                                    <a href="#" class="contactus">Contact us</a>
                            </div>
                            <div class="col-md-8" align="right">
                                <img src="images/Logo Name2.png" class="" width="350" height="125" alt=""/>
                            </div>

                    </div>
                    </div>

                    <div class="form-group">
                        <div class="col-md-12">
                            <h5 align="center" class="copyRightFooterH">Copy-Right &copy; 2015-2017;</h5>
                        </div>
                    </div>    
                </div><!--End Row-->
            </div><!--End container-->
        </div><!--End container-fluid-->

Answer 1

我会在 bootstrap 之外通过为 Logo 指定一个特定类来修改 css。 Bootstrap 是一个很棒的框架，添加自定义 CSS 将使您能够利用该框架并仍然添加您需要的操作。希望这会有所帮助。

这是工作代码笔。

http://codepen.io/anon/pen/oxJzQd?editors=1100

HTML 更改

  <div class="col-md-8 logo">
       <img src="images/Logo Name2.png" class="" width="350" height="125" alt=""/>
  </div>

CSS

.logo { 
  text-align:center; 
}

 /*optional stuffs */ 
.logo img{ width:100%; height:auto;}

@media only screen and (min-width : 768px) {
  .logo { text-align:right;}
   /*optional stuffs */ 
  .logo img {width:initial; height:initial;}
}