问题描述
要求:
移动视图
问题
使用 Bootstrap 网格来实现所需的设计,但在 Web 视图中,如果我使用一列,则要求图像应有一整列,因此在移动视图中需要左对齐的文本确实如此不向左移动,因为整个图像列已经占用了空间。
进展
网络视图
移动视图
代码:
<div className="row " style={{height:"100%"}}>
<div className="col-4 col-sm-2" style={{paddingTop:"3%"}}>
{/* {loading ? <BeatLoader loading={loading} size={15} /> : <img className="sub-product-img" src={img} />} */}
<img className="sub-product-img" src={require("./image")} />
</div>
<div className="col-8 col-sm-7" style={{padding:"2%"}}>
<div className="row">
<div className="col-12 col-sm-6">
<h4 className="text-left sub-product-heading" style={{fontSize: "16px",fontWeight: "bold"}}>heading</h4>
</div>
<div className="col-12 col-sm-6">
<h4 className="text-left sub-product-heading-italic" style={{color:"grey"}}>Next Billing Date June 15,2021</h4>
</div>
<div className="col-12 col-sm-12">
<h4 className="text-left sub-product-text">Order Number: 35438731</h4>
{/* <span className="text-left sub-product-heading">Next Billing Date</span> */}
</div>
</div>
<div className="row">
<div className="col-12 col-sm-6">
<h4 className="text-left sub-product-heading-light" style={{fontWeight:"600"}}>Started On</h4>
<h4 className="text-left sub-product-text">May 16,2020</h4>
</div>
<div className="col-12 col-sm-3">
<h4 className="text-left sub-product-heading-light" style={{fontWeight:"600"}}>Frequency</h4>
<h4 className="text-left sub-product-text">Monthly</h4>
</div>
<div className="col-12 col-sm-3">
<h4 className="text-left sub-product-heading-light" style={{fontWeight:"600"}}>Billing Address</h4>
<h4 className="text-left sub-product-text">2401 Warren Rd</h4>
</div>
</div>
</div>
<div className="col-12 col-sm-3 add-more-Box" style={{ backgroundColor: "#f7f8fa",border: "1px solid #dfdfdf" }}>
<div className="col-12 col-sm-12" style={{marginTop:"13%"}}>
<Button
name="ADD MORE ITEMS"
className="wine-custom-invert"
style={{ fontSize: "13px",background: "white",color: "#ff8b43" }}
onClick={() =>
console.log("Getting clicked")
}
/>
</div>
<div className="col-12 col-sm-12" style={{marginTop:"5%",marginBottom:"2%"}}>
<span style={{ color:"#2490ff",fontWeight: "bold",fontSize:"14px"
}}>Manage Subscription</span></div>
</div>
</div>
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)