使用 reactjs 引导类答案

【问题标题】：bootstrap classes with reactjs使用 reactjs 引导类
【发布时间】：2018-09-23 12:03:56
【问题描述】：

我想渲染以下部分（它是我的 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')
);

如您所见，我使用引导类。但它不能正确呈现代码。当我在主页上看到引导类时，我看不到引导类。

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 文件中导入引导程序，但是 col-xl-12 等.. 不起作用。我该怎么办？

【问题讨论】：

你能发布一个工作演示codesandbox.io吗？
你能看到源代码中正在加载的文件吗？
我不认为这是可能的，我使用 sass/css 这么多其他东西。我如何导入引导程序来做出反应？我想要 'col-xl-12 ... d-none ..col-md-5' 工作
这是加载css文件的最简单明了的方法，但您可能遇到了相对路径问题。你的目录结构是什么？
如果你想在 React 中使用 Bootstrap，react-bootstrap 是你的朋友。

标签： html reactjs bootstrap-4

【解决方案1】：

而不是 classname="col-md-4" 使用 md="4" 即时。参考这个链接： https://mdbootstrap.com/docs/react/layout/grid-examples/

【讨论】：