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是＆＃34;移动优先＆＃34;。

这就是为什么＆＃34; xs＆＃34;是多余的，不需要，以及它被删除的原因。

参考：

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

Bootstrap列偏移反应不起作用

1 个答案: