Javascript 在引导中更改断点处的元素位置
我在bootstrap中制作页脚，它有一些链接，如功能、关于、FQS、联系我们和徽标图像（隐藏版权） 对于大屏幕，链接和徽标图像等元素的位置很好。 但对于中等屏幕，“链接”开始垂直显示，而不是水平显示，徽标图像向下移动链接，正如您在提供的图片中所看到的。 这里我要两个零钱 1） 即使在中或小屏幕上，链接也必须水平显示 2） 一旦到达断点，元素应交换位置。（徽标图像应显示在链接位置，反之亦然） 代码：Javascript 在引导中更改断点处的元素位置,javascript,jquery,html,css,twitter-bootstrap,Javascript,Jquery,Html,Css,Twitter Bootstrap,我在bootstrap中制作页脚，它有一些链接，如功能、关于、FQS、联系我们和徽标图像（隐藏版权） 对于大屏幕，链接和徽标图像等元素的位置很好。 但对于中等屏幕，“链接”开始垂直显示，而不是水平显示，徽标图像向下移动链接，正如您在提供的图片中所看到的。 这里我要两个零钱 1） 即使在中或小屏幕上，链接也必须水平显示 2） 一旦到达断点，元素应交换位置。（徽标图像应显示在链接位置，反之亦然） 代码： <div class="container-fluid"> &
<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 © 2015-2017;</h5>
</div>
</div>
</div><!--End Row-->
</div><!--End container-->
</div><!--End container-fluid-->
BF2F
复制权&复制；2015-2017;
<div class="container">
<div class="row">
<h5 align="center" class="copyRightFooterH">BF2F</h5>
</div>
<div class="row">
<div class="col-xs-2">
<h3 id="FH"><a class="Features">Features</a></h3>
<br/>
<a href="About.php" class="about">About</a>
</div>
<div class="col-xs-2">
<h3 id="FH"><a class="FQS">FQS</a></h3>
<br/>
<a href="#" class="contactus">Contact us</a>
</div>
<div class="col-xs-8">
<img src="images/Logo Name2.png" class="" width="350" height="125" alt=""/>
</div>
</div>
<div class="row">
<h5 align="center" class="copyRightFooterH">Copy-Right © 2015-2017;</h5>
</div>
</div><!--End container-fluid-->
BF2F
复制权&复制；2015-2017;
注意。尝试使用form group类删除div，因为您已经堆叠了列 试试这个：
<div class="container">
<div class="row">
<h5 align="center" class="copyRightFooterH">BF2F</h5>
</div>
<div class="row">
<div class="col-xs-2">
<h3 id="FH"><a class="Features">Features</a></h3>
<br/>
<a href="About.php" class="about">About</a>
</div>
<div class="col-xs-2">
<h3 id="FH"><a class="FQS">FQS</a></h3>
<br/>
<a href="#" class="contactus">Contact us</a>
</div>
<div class="col-xs-8">
<img src="images/Logo Name2.png" class="" width="350" height="125" alt=""/>
</div>
</div>
<div class="row">
<h5 align="center" class="copyRightFooterH">Copy-Right © 2015-2017;</h5>
</div>
</div><!--End container-fluid-->
BF2F
复制权&复制；2015-2017;
注意。这是因为您说在中等屏幕大小时，有以下列布局：
<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 class="col-xs-12">
<div class="col-xs-2">
<h3 id="FH"><a class="Features">Features</a></h3>
</br>
<a href="About.php" class="about">About</a>
</div>
<div class="col-xs-2">
<h3 id="FH"><a class="FQS">FQS</a></h3>
</br>
<a href="#" class="contactus">Contact us</a>
</div>
<div class="col-xs-8 col-md-8" align="right">
<img src="images/Logo Name2.png" class="" width="350" height="125" alt=""/>
</div>
</div>
我相信这就是你正在谈论的问题。但是它没有帮助，因为您没有为人们提供JSFIDLE链接来方便地帮助您。我建议您在以后的参考资料中附加JSFIDLE链接。这是因为您说在中等屏幕大小时有以下列布局：
<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 class="col-xs-12">
<div class="col-xs-2">
<h3 id="FH"><a class="Features">Features</a></h3>
</br>
<a href="About.php" class="about">About</a>
</div>
<div class="col-xs-2">
<h3 id="FH"><a class="FQS">FQS</a></h3>
</br>
<a href="#" class="contactus">Contact us</a>
</div>
<div class="col-xs-8 col-md-8" align="right">
<img src="images/Logo Name2.png" class="" width="350" height="125" alt=""/>
</div>
</div>
我相信这就是你正在谈论的问题。但是它没有帮助，因为您没有为人们提供JSFIDLE链接来方便地帮助您。我建议您在以后的参考中附加JSFIDLE链接。我会在引导之外修改css，为徽标指定一个特定的类。Bootstrap是一个很好的框架，添加自定义CSS将使您能够利用该框架，并且仍然可以添加所需的操作。希望这有帮助 这是工作代码笔 HTML更改
<div class="col-md-8 logo">
<img src="images/Logo Name2.png" class="" width="350" height="125" alt=""/>
</div>
我会在bootstrap之外通过给logo一个特定的类来修改css。Bootstrap是一个很好的框架，添加自定义CSS将使您能够利用该框架，并且仍然可以添加所需的操作。希望这有帮助 这是工作代码笔 HTML更改
<div class="col-md-8 logo">
<img src="images/Logo Name2.png" class="" width="350" height="125" alt=""/>
</div>
我编辑我的文章并添加示例，如果你需要为小屏幕堆叠，请使用col-sm-xx而不是col-xs-xx。你的示例在哪里？是的，它可以工作，我在括号中这样做。。。我可以发布整个文件，也许你在导入、css规则方面有问题？我编辑我的帖子并添加示例，如果你需要为小屏幕进行堆栈，请使用col-sm-xx而不是col-xs-xx。你的示例在哪里？是的，它可以工作，我在括号中这样做。。。我可以发布整个文件，也许你在导入、css规则方面有问题？谢谢！但这是我第二个问题的解决方案。这并不能解决我的第一个问题，如果你举一个例子，说明你在寻找什么，我可以帮助你，但我对第一个问题有点困惑。Thnks！但这是我第二个问题的解决方案。这并不能解决我的第一个问题，如果你举一个例子，说明你在寻找什么，我可以帮助你，但我对第一个问题有点困惑。