Question

我正在尝试使我的投资组合具有响应能力，但是引导程序存在一些问题。

我有4个div，应该均匀地占据屏幕的宽度。我有一个类的row d-none d-sm-block就可以了。当屏幕低于576像素时，这应该隐藏这组div并切换我的移动视图。这似乎在起作用。

我在4个div上每个都有一个col-sm-3。这看起来像问题。它应该均匀地占据宽度，并且可以做到这一点-直到宽度达到770像素或以下，然后div才以4行而不是1行堆叠。当屏幕宽度达到约760像素

经检查，该列似乎由于某种原因占据了屏幕的整个宽度。我不知道是什么问题。整个网站可以在heroku上找到。您必须向下滚动到“主要技术堆栈”：

https://mighty-ocean-12133.herokuapp.com/

这是我所拥有的代码段：

        <div className="container">
      <div className="row d-none d-sm-block">
        <div style={{cursor: "pointer"}} className="col-sm-3" onMouseOver={this.openBox.bind(this,'ReactJS')} onMouseLeave={this.fadeIn.bind(this, 'ReactJS')}>
          <img width="100%" height="100%" src="/assets/ReactJS.png" alt=""></img>                  
        </div>
        <div style={{cursor: "pointer"}} className="col-sm-3" onMouseOver={this.openBox.bind(this,'AngularJS')} onMouseLeave={this.fadeIn.bind(this, 'AngularJS')}>
          <img width="100%" height="100%" src="/assets/AngularJS.png" alt=""></img>                  
        </div>
        <div style={{cursor: "pointer"}} className="col-sm-3" onMouseOver={this.openBox.bind(this,'Java')} onMouseLeave={this.fadeIn.bind(this, 'Java')}>
          <img width="100%" height="100%" src="/assets/Java.jpg" alt=""></img>                  
        </div>
        <div style={{cursor: "pointer"}} className="col-sm-3" onMouseOver={this.openBox.bind(this,'Accessibility')} onMouseLeave={this.fadeIn.bind(this, 'Accessibility')}>
          <img width="100%" height="100%" src="/assets/Accessibility.png" alt=""></img>                  
        </div>
      </div>   
      <div className="row d-block d-sm-none">

        <div style={{cursor: "pointer"}} className="col-md-3">
          <img src="/assets/ReactJS.png" alt=""></img>                  
        </div>
        <div style={{cursor: "pointer"}} className="col-md-3">
          <img src="/assets/AngularJS.png" alt=""></img>                  
        </div>
        <div style={{cursor: "pointer"}} className="col-md-3">
          <img src="/assets/Java.jpg" alt=""></img>                  
        </div>
        <div style={{cursor: "pointer"}} className="col-md-3">
          <img src="/assets/Accessibility.png" alt=""></img>                  
        </div>
      </div>           
    </div>

对我的投资组合中的任何其他随机评论也表示赞赏。

Answer 1

仅将d-flex flex-row与justify-content-around或justify-content-between组合使用

我在这里使用过Bootstrap 4。

<body>

    <div class="container-fluid bg-light">
        <div class="col-12">
            <div class="row d-flex flex-row justify-content-around">
                <div class="border border-dark">
                    <img src="./images/reactjs.png" alt="" />
                </div>
                <div class="border border-dark">
                    <img src="./images/angularjs.png" alt="" />
                </div>
                <div class="border border-dark">
                    <img src="./images/java.png" alt="" />
                </div>
                <div class="border border-dark">
                    <img src="./images/accessibility.png" alt="" />
                </div>
            </div>
        </div>
    </div>

</body>

希望它会对您有所帮助。

Bootstrap移动响应性问题

1 个答案: