反应中的引导列偏移不起作用[重复]

Question

我有一个行容器和几个包含图像的 div 元素。该组中的第一个 div 元素具有 col-xs-2 和 offset-xs-3 类。由于某种我不知道的原因，它不起作用。

代码如下：

<div>
    <div className='jumbotron' style={{'text-align': 'center'}}>

      <h1 className='header'>Welcome to Redux</h1>
      <h4 className='header_subtext'>Check out dynamic state alteration</h4>
      <br />

      <div className='row'>
        <div className='col-xs-2 offset-xs-3 '>
          <img src='react.png' height='96' alt='React' onClick={this.handleVoteReact} />
        </div>
        <div className='col-xs-2'>
          <img src='vue.png' height='96' alt='React' onClick={this.handleVoteVue} />
        </div>
        <div className='col-xs-2'>
          <img src='angular.png' height='96' alt='React' onClick={this.handleVoteAngular} />
        </div>
      </div>

    </div>
  </div>

Answer 1

由于某些我不知道的原因，它不起作用。

原因很简单：

Bootstrap 4 中没有 -xs-（不再）。

只需将col-xs-2 替换为col-2 并将offset-xs-3 替换为offset-3 即可。

Bootstrap 4 是“移动优先”。

这就是为什么“xs”是多余且不需要的，也是它被删除的原因。

参考：

https://getbootstrap.com/docs/4.0/layout/grid/#grid-options