javascript - 如何把一整堂课放在右边?/ 如何在课堂上添加填充?- 困惑(React.js - Bootstrap)
问题描述
所以,我是一个 react js 和 bootstrap 菜鸟。请告诉我如何实现所需的更改来帮助我-基本上我希望将图像(在下图中的右侧看到)放在我网站的右侧,目前文本和图像太接近了对彼此。我怎样才能做到这一点?图片下方也是我对该网页的代码。 https://i.stack.imgur.com/6OoTa.png
import React from "react";
import web from "../src/images/myimage.svg";
import {NavLink} from "react-router-dom";
const Common =(props) => {
return (
<>
<section id = "header" className = "d-flex align-items-between ">
<div className = "container-fluid">
<div className = 'row'>
<div className = "col-10" mx-auto>
<div className ="row">
<div className = "col-md-6 pt-5 pt-lg-0 order-2 order-lg-1 d-flex justify-content-center flex-column">
<h1>{props.name} <strong className = "brand-name"> Pinnacle Tutorials</strong>
</h1>
<h2 className = "my-3">
We are a team of talented Teachers here for your ward
</h2>
<div ClassName = "mt-3">
<NavLink to={props.visit} className = "btn btn-success">Get Started check - {props.btname}</NavLink>
</div>
</div>
<div className = "col-lg-6 order-6 order-lg-5 header-img d-flex justify-content-end">
<img src ={props.imgsrc} className = "img animated" alt = "home img "/>
</div>
</div>
</div>
</div>
</div>
</section>
</>
);
};
export default Common;
导航栏代码:
import React from "react";
import { NavLink } from "react-router-dom";
const Navbar = () => {
return (
<>
<div className = "container-fullwidth nav_bg">
<div className = 'row'>
<div className = "col-12 mx-auto">
<nav className="navbar navbar-expand-lg navbar-light bg-light py-3 container-fluid">
<NavLink className="navbar-brand" to="/">Pinnacle Tutorials</NavLink>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<ul className="navbar-nav ms-auto">
<li className="nav-item active">
<NavLink activeClassName ="menu_active" exact className="nav-link" to="/">Home <span className="sr-only">(current)</span></NavLink>
</li>
<li className="nav-item">
<NavLink activeClassName ="menu_active" className="nav-link" to="/about">About</NavLink>
</li>
<li className="nav-item">
<NavLink activeClassName ="menu_active" className="nav-link" to="/service">Services</NavLink>
</li>
<li className="nav-item">
<NavLink activeClassName ="menu_active" className="nav-link" to="/contact">Contact</NavLink>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</>
);
};
export default Navbar
解决方案
p {
padding-right: 150px;
}
<div class="bg-light d-flex justify-content-between">
<div>Total Cost</div>
<div>$50</div>
</div>
推荐阅读
- javascript - 用柏树找不到 iframe
- logstash - 如何为 Logstash 输入读取 gzipped json?
- java - 使用 2 个 for 循环创建具有给定字符串的三角形
- matlab - 用于 nvidia tesla k40m gpu 的 ubuntu 18.04 驱动程序设置,用于与 matlab 一起使用
- c# - 方法 'System.String TrimStart(Char[])' 仅在 LINQ to Entities 中受支持
- python - 如何使用 BeautifulSoup 进行解析
标签好像它们被关闭了?
- django - Django 2:如何在管理界面中强制使用外键
- javascript - 如何在羽毛 js 的响应中返回非 json 数据?
- dart - 当 orderby 字符串值时 Flutter Firestore startAt() endtAt() 不起作用
- docker - “目标机主动拒绝”对 tensorflow 服务 Docker 容器的 POST 请求