2017-10-09 114 views
1

我试图上传和映像,但由于某种原因,它无法正常工作。Bootstrap列在响应时向左移动

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

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

感谢您的时间

+0

显示你的代码,请 – Thielicious

+1

有3个班,'COL-MD-4'的屏幕中,用于大屏幕的'col-lg-4',以及用于小屏幕的手机'col-xs-4'。您必须添加与手机屏幕大小相对应的类。 – F0XS

+0

@FoxCy,所以在我的情况下 - 这是否意味着它将是div class =“col-xs-12 col-md-4”,因为我想在移动设备上显示一列...但在桌面上显示3列? – Matt1966

回答

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>