html - react 中的 Bootstrap 列偏移不起作用

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

For some reason unknown to me, it will not work.

原因很简单:

没有-xs-在 Bootstrap 4 中(不再)。

只需替换 col-xs-2与 col-2和offset-xs-3与 offset-3它会起作用的。

Bootstrap 4 是“移动优先”。

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

引用:

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