如何把一整堂课放在右边？ / 如何在课堂上添加填充？ - 困惑（React.js - Bootstrap）

Posted 2023-02-22

【中文标题】如何把一整堂课放在右边？ / 如何在课堂上添加填充？ - 困惑（React.js - Bootstrap）

【英文标题】：How to put one whole class to the right ? / how to add padding in class? - confused ( React.js - Bootstrap)

【发布时间】：2021-09-09 15:37:43

【问题描述】：

所以，我是一个 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

【参考方案1】：

所以这里发生的事情是您正在创建两列，每列的宽度相等。如果您希望包含图像的列将图像放置在最末端，我建议以 flex 方式进行操作，即给包含 <img> 的 col 显示 flex 可以用类d-flex，然后对其应用justify-content: flex-end;，这可以通过添加类名justify-content-end来完成

最后，您的 div 应该如下所示：

 <div className = "col-lg-6 order-6 order-lg-5 pad-10 header-img d-flex justify-content-end">
   <img src =props.imgsrc className = "img-fluid animated" alt = "home img "/>
</div>

【讨论】：

很好，这似乎可行，但也会拉伸图像以适应最后。知道如何才能使图像的大小保持不变吗？

是的，从img 标记中删除img-fluid 类。此类应用于一个 div，您希望该 div 占据父 div 的空间（有点像液体/“流体”如何采用其保存的容器的形状）

太棒了！最后一个与这篇文章无关的问题：困扰我的一件事是导航栏在到达终点之前是如何结束的。 （请参阅我帖子中的 imgur 图片）我环顾四周，但每个人都说要使用容器流体使其适合结束.. 我试过但它似乎不起作用.. 它仍然保持不变。你能帮忙吗？

尝试提供一个小提琴/codeandbox，这样我就可以获得更多的图像。

我已经在上面添加了整个导航栏代码，请检查

【参考方案2】：

p 
  padding-right: 150px;

<div class="bg-light d-flex justify-content-between">
    <div>Total Cost</div>
    <div>$50</div>
</div>