如何在div之后添加一段文字？ （反应js，引导）

Question

一个非常菜鸟的问题。所以我正在练习制作这个网站。我怎样才能做到这一点：我希望能够在“开始”按钮下写下“要了解有关我们的更多信息，请单击此处”。我尝试在按钮 div 之后添加一个简单的标签来这样做，但这不起作用。这就是我希望它最终的样子： https://i.stack.imgur.com/TqAD9.png

如果有帮助，这是托管在 netfy 上的整个网站：https://pinnacletrial.netlify.app/

代码如下：当前页面是 HOME.jsx，它调用了一个组件 Common.jsx home.jsx 的代码：---

import React from "react";
import web from "../src/images/myimage.svg";
import {NavLink} from "react-router-dom";
import Common from './Common';
import CarouselContainer from "./CarouselContainer";
import Aboutrefer from "./aboutrefer";



const Home =()  => {
    return (
         <>
         <CarouselContainer/>
        
         <Common name ='Learn with' imgsrc = {web} visit ='/service' btnname='Get started' />
        
       </>
         
         
        
         

     
    );
};

export default Home;

Common.js 代码----

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-12" 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 {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;

Answer 1

您可以在Common.js 中的NavLink 之后写下它，例如：

例子：

<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 {props.btname</NavLink>
</div>

To know more about us, click here <NavLink to="/about">About</NavLink>

完整代码：

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-12" 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 {props.btname}</NavLink>
                     </div>

To know more about us, click here <NavLink to="/about">About</NavLink>

                  </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;

Answer 2

你有一个类名为“row”的 div。我会在其下方添加具有相同类名“row”的新 div，因为引导程序中的 row 意味着块将堆叠在一起并占据容器的整个宽度。

Common.js：

<div className="row">
    ....
    <h2 className = "my-3">
        We are a team of talented Teachers here for your ward
    </h2>
    ....
</div>
<div className="row">
     To know more about us click here
</div>