我试图让我的投资组合反应,但具有引导一些问题。
我有4个格应该占用屏幕的宽度均匀。我有一个类就可以了row d-none d-sm-block
的。这应该隐藏这个组的div和拨动我的移动视图的时候,屏幕低于576个像素。这似乎是工作。
我也有在每个4个格的col-sm-3
。这看起来像问题。它应该均匀占用的宽度和它 - 直到你的770个像素或以下,则申报单栈的宽度在4行,而不是之一。当屏幕的宽度变至约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>
在我的投资组合的任何其他随机的意见表示赞赏为好。
只需使用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>
希望它会帮助你。