Question

我想渲染以下部分（它是xl和lg屏幕标题的一部分）

ReactDOM.render(
 <div>

    <div className="col-xl-4 col-lg-4 d-none d-xl-block d-lg-block">
        <div className="row">
           <div className="col-xl-12 col-lg-4">
               <a href="#" className="logo"><span>SP4RK.net</span></a>
           </div>

            <div className="col-xl-12">
                <span className="slogan">Быстро. Удобно.</span>
            </div>
         </div>
    </div>

    <div className="col-md-4 d-none d-md-block d-lg-none">
        <div className="row">

           <div className="col-md-10">
               <a href="#" className="logo-link"><span className="logo-md">SP4RK.net</span></a>
           </div>

            <div className="col-md-11">
                <span className="title-md">Быстро. Удобно.</span>
            </div>
       </div>
    </div>



 </div>,
  document.getElementById('header-main')
);

如你所见，我使用了bootstrap类。但是它没有正确地呈现代码。当我在主页上看到它时，我没有看到引导类。

Html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SP4RK.net</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <link rel="stylesheet" href="../css/bootstrap/bootstrap.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" integrity="sha384-3AB7yXWz4OeoZcPbieVW64vVXEwADiYyAEhwilzWsLw+9FgqpyjjStpPnpBO8o8S" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="../libs/slick-carousel/slick/slick.sass"/>
    <link rel="stylesheet" type="text/css" href="../libs/slick-carousel/slick/slick-theme.sass"/>
    <link rel="stylesheet" href="../css/libs.min.css">
    <link rel="stylesheet" href="../css/FAQ.css">
    <link rel="stylesheet" href="../css/rendering/header.css">
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css"> 
</head>
<body>
<header class="main-head d-block d-sm-block">

<div class="container">
 <div class="row">

<div id="header-main">
</div>



 </div>
</div>
</header>





<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.js"></script>
<script type="text/javascript" src="libs/slick-carousel/slick/slick.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script>

<script src="../js/libs.min.js" ></script>
<script src="../js/common.js" ></script>
<script src="../js/main.js" ></script>
<script type="text/babel" src="/js/rendering/header.js">
);
 </script>  
</body>

我在html文件中导入bootstrap，但是col-xl-12等..不起作用。我该怎么办？

Answer 1

代替classname =“ col-md-4”使用md =“ 4”表示即时。参考此链接： https://mdbootstrap.com/docs/react/layout/grid-examples/

带有reactjs的bootstrap类

1 个答案: