引导手机响应速度问题

问题描述 投票:0回答:1

我试图让我的投资组合反应,但具有引导一些问题。

我有4个格应该占用屏幕的宽度均匀。我有一个类就可以了row d-none d-sm-block的。这应该隐藏这个组的div和拨动我的移动视图的时候,屏幕低于576个像素。这似乎是工作。

我也有在每个4个格的col-sm-3。这看起来像问题。它应该均匀占用的宽度和它 - 直到你的770个像素或以下,则申报单栈的宽度在4行,而不是之一。当屏幕的宽度变至约760个像素

enter image description here

经检查,它看起来像列占用了屏幕的整个宽度的某些原因。我想不通的问题是什么。整个网站可以在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>

在我的投资组合的任何其他随机的意见表示赞赏为好。

css bootstrap-4
1个回答
2
投票

只需使用d-flex flex-rowjustify-content-aroundjustify-content-between的组合

我在这里使用Bootstrap 4

enter image description here

<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>

希望它会帮助你。

© www.soinside.com 2019 - 2024. All rights reserved.