css - react-bootstrap 行和列定位错误
问题描述
当我正在构建一个 React 项目时。我正在使用“ react-bootstrap ”中的Row和Col ，其中 Row 分别分为Col lg='8'和Col lg='4'。除了这个基本的东西，我还添加了一个常量文件，我使用 props 从中获取值。使用道具获得所有值后，我继续使用地图功能在浏览器中显示信息。
此处的设置实际上非常简单。我实际上有两列，其中Col lg='8'我用来存储从映射函数返回的所有信息。幸运的是，一切都很好。完成后，我还有另一个Col lg='4'，我正在以与之前相同的方式使用它，即在浏览器中显示信息，但不使用任何道具或任何映射功能。再说一次，这也很好用。
现在这是我无法解决的问题。由于我在浏览器中显示信息的工作进展顺利，但这带来了将Col lg='4' top-right 转移到Col lg='8' 的一些问题。为什么？显然，这意味着我的代码中会有一些/很多有问题的缺点。
这是我目前所拥有的：
src > 路由 > 博客 > 组件 > 博客 > 组件 > BlogContent > index.js
import React from 'react'
import { Row, Col } from 'react-bootstrap'
import { UserOutlined, WechatOutlined, MinusOutlined } from '@ant-design/icons';
const BlogContent = (props) => {
return (
<>
<Col lg='8'>
<img alt='' src={props.imgsrc} />
<a href='' className='BlogDate'><h3>{props.date}</h3><p>{props.month}</p></a>
<div className='BlogCntnt'>
<a href=''><h2>{props.heading}</h2></a>
<p>{props.paragraph}</p>
<ul>
<li>
<a href=''>{<UserOutlined />}<span>{props.category}</span>{<MinusOutlined />}</a>
</li>
<li>
<a href=''>{<WechatOutlined />}<span>{props.comment}</span></a>
</li>
</ul>
</div>
</Col>
</>
)
}
export default BlogContent;
src > 路由 > 博客 > 组件 > 博客 > index.js
import React from 'react'
import './style.scss'
import BlogContent from '../Blogs/Components/BlogContent/index'
import BlogMap from '../../../../Constant/BlogMap'
import { Row, Col } from 'react-bootstrap'
import { Images } from '../../../../Shared/Assets'
import ImagesIcon from '../../../../Components/Cells/ImagesIcon'
import { LeftOutlined, RightOutlined } from '@ant-design/icons';
const LatestBlog = () => {
return (
<>
<div className='BlogSection'>
<div className='BlgCntnr'>
<Row>
{
BlogMap.map((val, ind) => {
return (
<BlogContent
key={ind}
imgsrc={val.imgsrc}
date={val.date}
month={val.month}
heading={val.heading}
paragraph={val.paragraph}
category={val.category}
comment={val.comment}
/>
)
})
}
<div className='NxtPrvBtn'>
<ul>
<li>
<a href=''>{<LeftOutlined />}</a>
</li>
<li>
<a href=''>1</a>
</li>
<li>
<a href=''>2</a>
</li>
<li>
<a href=''>{<RightOutlined />}</a>
</li>
</ul>
</div>
<Col lg='4'>
<div className='SideBar'>
<div className='SearchSection'>
<input type='text' value='Search Keyword'/>
<input type='button' value='Search'/>
</div>
<div className='CategorySection'>
<h2>Category</h2>
<ul>
<li>
<a href=''>Restaurant Food(37)</a>
</li>
<li>
<a href=''>Travel News(10)</a>
</li>
<li>
<a href=''>Modern Technology(03)</a>
</li>
<li>
<a href=''>Product(11)</a>
</li>
<li>
<a href=''>Inspiration(21)</a>
</li>
<li>
<a href=''>Health Care(21)09</a>
</li>
</ul>
</div>
<div className='PostSection'>
<h2>Recent Post</h2>
<div className='PostItem'>
<ImagesIcon src={Images.post_1_jpg}/>
<div className='PostBody'>
<a href=''>From life was you fish...</a>
<p>January 12, 2019</p>
</div>
</div>
<div className='PostItem'>
<ImagesIcon src={Images.post_2_jpg}/>
<div className='PostBody'>
<a href=''>The Amazing Hubble</a>
<p>02 Hours Ago</p>
</div>
</div>
<div className='PostItem'>
<ImagesIcon src={Images.post_3_jpg}/>
<div className='PostBody'>
<a href=''>Astronomy or Astrology</a>
<p>03 Hours Ago</p>
</div>
</div>
<div className='PostItem'>
<ImagesIcon src={Images.post_4_jpg}/>
<div className='PostBody'>
<a href=''>Asteroids telescope</a>
<p>01 Hours Ago</p>
</div>
</div>
</div>
<div className='TagSection'>
<h2>Tag Cloud</h2>
<ul>
<li>
<a href=''>project</a>
</li>
<li>
<a href=''>love</a>
</li>
<li>
<a href=''>technology</a>
</li>
<li>
<a href=''>travel</a>
</li>
<li>
<a href=''>restaurant</a>
</li>
<li>
<a href=''>life style</a>
</li>
<li>
<a href=''>design</a>
</li>
<li>
<a href=''>illustration</a>
</li>
</ul>
</div>
<div className='InstagramSection'>
<h2>Instagram Feeds</h2>
<ul>
<li>
<a href=''><ImagesIcon src={Images.xpost_5}/></a>
</li>
<li>
<a href=''><ImagesIcon src={Images.xpost_6}/></a>
</li>
<li>
<a href=''><ImagesIcon src={Images.xpost_7}/></a>
</li>
<li>
<a href=''><ImagesIcon src={Images.xpost_8}/></a>
</li>
<li>
<a href=''><ImagesIcon src={Images.xpost_9}/></a>
</li>
<li>
<a href=''><ImagesIcon src={Images.xpost_10}/></a>
</li>
</ul>
</div>
<div className='NewsLetterSection'>
<h2>NewsLetter</h2>
<div className='NewsLetterForm'>
<input type='text' value='Enter Email'/>
<input type='button' value='Subscribe'/>
</div>
</div>
</div>
</Col>
</Row>
</div>
</div>
</>
)
}
export default LatestBlog;
.scss 文件
.BlogSection{
padding: 100px 0px;
.BlgCntnr{
padding: 0px 40px;
img{
width: 100%;
}
.BlogDate{
position: absolute;
bottom: 210px;
left: 47px;
color: #fff;
background-color: #01ff56;
padding: 12px 20px;
border-radius: 5px;
text-decoration: none;
h3,p{
margin: unset;
}
&:hover{
color: #01ff56;
background-color: unset;
}
}
.BlogCntnt{
box-shadow: 0 0 13px 3px #0000001c;
padding: 0px 30px;
padding-top: 70px;
padding-bottom: 25px;
a{
h2{
text-decoration: none;
color: #2d2d2d;
font-size: 28px;
font-family: "Shippori Mincho",serif;
text-decoration: none;
}
&:hover{
color: #01ff56;
text-decoration: none;
}
}
p {
font-family: "Chivo",sans-serif;
line-height: 30px;
margin-bottom: 15px;
line-height: 1.4;
}
ul{
padding-bottom: 20px;
li{
a{
color: #999;
float: left;
text-decoration: none;
.anticon.anticon-user{
svg{
position: relative;
left: 0px;
bottom: 4px;
margin-right: 5px;
font-size: 14px;
}
}
.anticon.anticon-wechat{
svg{
position: relative;
left: 0px;
bottom: 4px;
margin-right: 5px;
font-size: 14px;
}
}
.anticon.anticon-minus{
svg{
transform: rotate(270deg) translate(2px, 0px);
color: #000;
margin-left: 5px;
margin-right: 5px;
font-size: 14px;
}
}
span{
font-size: 14px;
}
&:hover{
color: #01ff56;
}
}
}
}
}
.SideBar{
.SearchSection{
background: #fbf9ff;
padding: 30px;
margin-bottom: 30px;
input[type='text']{
height: 50px;
font-size: 13px;
color: #999;
padding-left: 20px;
border: 1px;
border-color: #f0e9ff;
width: 68%;
}
input[type='button']{
background: #01ff56;
border: 1px solid #f0e9ff;
padding: 12px 25px;
border-left: 0;
cursor: pointer;
color: #fff;
}
}
.CategorySection{
background: #fbf9ff;
padding: 30px;
margin-bottom: 30px;
h2{
font-size: 22px;
margin-bottom: 30px;
color: #2d2d2d;
font-family: "Shippori Mincho",serif;
}
h2::after{
content: "";
display: block;
padding-top: 15px;
border-bottom: 1px solid #f0e9ff;
}
ul{
li{
border-bottom: 1px solid #f0e9ff;
transition: all .3s ease 0s;
padding-bottom: 15px;
padding-top: 15px;
a{
font-family: "Chivo",serif;
color: #150303;
font-size: 18px;
line-height: 30px;
margin-bottom: 15px;
font-weight: normal;
line-height: 1.4;
&:hover{
color: #01ff56;
text-decoration: none;
}
}
}
li:last-child{
border-bottom: none;
padding-bottom: unset;
}
}
}
.PostSection{
background: #fbf9ff;
padding: 30px;
margin-bottom: 30px;
h2{
font-size: 22px;
margin-bottom: 30px;
color: #2d2d2d;
font-family: "Shippori Mincho",serif;
}
h2::after{
content: "";
display: block;
padding-top: 15px;
border-bottom: 1px solid #f0e9ff;
}
.PostItem{
display: flex;
position: relative;
margin-bottom: 1rem;
img{
height: 100% !important;
}
.PostBody{
justify-content: center;
align-self: center;
padding-left: 20px;
position: absolute;
left: 5rem;
bottom: 17px;
a{
font-size: 20px;
line-height: 20px;
margin-bottom: 6px;
color: #2d2d2d;
font-family: "Shippori Mincho",serif;
&:hover{
color: #01ff56;
text-decoration: none;
}
}
p{
font-size: 14px;
line-height: 21px;
margin-bottom: 0;
font-family: "Chivo",sans-serif;
color: #150303;
font-size: 14px;
padding-top: 5px;
}
}
}
}
.TagSection{
background: #fbf9ff;
padding: 30px;
padding-bottom: 12px;
margin-bottom: 30px;
h2{
font-size: 22px;
margin-bottom: 30px;
color: #2d2d2d;
font-family: "Shippori Mincho",serif;
}
h2::after{
content: "";
display: block;
padding-top: 15px;
border-bottom: 1px solid #f0e9ff;
}
ul{
li{
display: inline-block;
list-style: none;
a{
display: inline-block;
border: 1px solid #eee;
background: #fff;
padding: 4px 20px;
margin-bottom: 10px;
margin-right: 10px;
color: #888;
font-size: 13px;
&:hover{
color: #fff;
background-color: #01ff56;
text-decoration: none;
}
}
}
}
}
.InstagramSection{
background: #fbf9ff;
padding: 30px;
padding-bottom: 12px;
margin-bottom: 30px;
h2{
font-size: 22px;
margin-bottom: 30px;
color: #2d2d2d;
font-family: "Shippori Mincho",serif;
}
h2::after{
content: "";
display: block;
padding-top: 15px;
border-bottom: 1px solid #f0e9ff;
}
ul{
display: flex;
flex-wrap: wrap;
li{
float: left;
padding-right: 6px;
padding-left: 6px;
margin-bottom: 15px;
a{
img{
height: 100% !important;
}
}
}
}
}
.NewsLetterSection{
background: #fbf9ff;
padding: 30px;
margin-bottom: 30px;
h2{
font-size: 22px;
margin-bottom: 30px;
color: #2d2d2d;
font-family: "Shippori Mincho",serif;
}
h2::after{
content: "";
display: block;
padding-top: 15px;
border-bottom: 1px solid #f0e9ff;
}
.NewsLetterForm{
input[type='text']{
height: 50px;
width: 100%;
border: 1px solid #f0e9ff;
font-size: 13px;
color: #999;
padding-left: 20px;
margin-bottom: 1rem;
}
input[type='button']{
color: #01ff56;
background-color: #fff;
border: 1px solid;
border-color: #01ff56;
font-size: 15px;
font-family: "Shippori Mincho",serif;
text-transform: uppercase;
letter-spacing: 2px;
padding: 10px 50px;
width: 100%;
height: 50px;
&:hover{
color: #fff;
background-color: #01ff56;
}
}
}
}
}
.NxtPrvBtn{
margin-top: 80px;
ul{
display: flex;
justify-content: center;
list-style: none;
li{
a{
font-size: 14px;
display: block;
text-align: center;
margin-left: -1px;
line-height: 45px;
width: 45px;
height: 45px;
color: #8a8a8a;
border: 1px solid #f0e9ff;
margin-right: 10px;
span{
svg{
position: relative;
bottom: 5px;
}
}
&:hover{
color: #01ff56;
text-decoration: none;
}
}
}
}
}
}
}
我希望我的查询很清楚。谢谢。
解决方案
推荐阅读
- vue.js - vuejs数据价格总计算
- node.js - nodejs，获取 aws cloudwatch 流列表
- javascript - 当我设置 $.mask.definitions['#'] 时，它会覆盖其他输入
- java - 如何在控制台上显示字符串？
- python - 在 Django 中的 ManyToMany 关系中添加和删除项目
- java - 如何从java中的二维字符串数组中选择随机元素
- node.js - 承诺永远不会解决 - NodeJS
- php - 为什么 Laravel 会检查 CORS 服务器端？
- date - 朱莉娅@Subset 日期
- python - 如何修改我的细分代码以绘制双分散系统