响应时,Bootstrap列向左移动

时间:2017-10-09 11:03:48

标签: html css bootstrap-4

我尝试上传和图像,但由于某种原因它无法正常工作。

基本上,我在div class="col-md-4"中有很长的超链接列表,所以有三列。在PC和笔记本电脑上它看起来非常好,但是当使用手机响应时,所有链接都会直接进入屏幕的左侧。

如何在响应时将它们设为中心?

感谢您的时间

1 个答案:

答案 0 :(得分:0)

参考此代码:



<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>
&#13;
&#13;
&#13;