Question

当我必须在class='col-6'中渲染我的整个反应应用程序时，如何使用像<div id="root"></div>这样的Bootstrap类来创建网格系统？它适用于<div id='root'>而不是实际的身体元素。

index.html中的

<!DOCTYPE html>
<html lang="en">
  <body>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>React App</title>
  </head>
    <div id="root"></div>
    <noscript>
        You need to enable JavaScript to run this app.
      </noscript>  
  </body>
</html>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.js"></script>
<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>

<{1>}中的

（反应）

App.js

class FormApp extends Component {
    render(){
      return(
        <div className="formdiv col-6">
        <form className="ui form" id='form' method='post' action='/post'>
        <div className="field">
          <h4 className="ui horizontal divider header">
            Budget Calculator
          </h4>
          <div>
            <input  className="input-group-text" type="text" id="id" name='_id' placeholder='NOTE NAME' autoFocus required autoComplete="off"/>
          </div>
          <div className="two fields">
            <div className="field">
              <input  type='text' name='firstItem' placeholder='item' required autoComplete="off"/>
              <input  type='text' name='secondItem' placeholder='item' required autoComplete="off"/>
              <input  type='text' name='thirdItem'  placeholder='item' required autoComplete="off"/>
            </div>
            <div className="field">
              <input  type='number' name='firstPrice'   onKeyUp={calc} className='price'  placeholder='price'  required autoComplete="off"/>
              <input  type='number' name='secondPrice'  onKeyUp={calc} className='price'  placeholder='price'  required autoComplete="off"/>
              <input  type='number' name='thirdPrice'   onKeyUp={calc} className='price'  placeholder='price'  required autoComplete="off"/>
            </div>
          </div>
          <input  type='number' name='tBudget' id='totalbudget' placeholder="total price" readOnly/>
        </div>
        <button id='save-btn' type='submit' onClick={saveNote} className="ui teal labeled icon positive button">
            <span>save</span>
            <i className="add icon"></i>
        </button>
        </form>
        <button id='reset-form' className='ui red button' onClick={reset}>reset</button> <br/>

        <div className="ui icon input">
          <input type="text" id='searchbyid' placeholder="Search..."/>
          <i  id='ShowByID' onClick={searchById} className="circular search link icon"></i>
        </div>

        <div className="ui icon input">
          <input type="text" id="deleteById" placeholder="Delete..."/>
          <i  id='delete' onClick={DeleteOneNote} className="circular trash link icon"></i>
        </div>
        <button id='showAll' className='ui blue button'>my notes</button>
        </div>
      )
    }
  }


 class App extends Component {
     render() {
        return (
         <Fragment>    
           <FormApp/>
        </Fragment>
    );
  }
}

中的

index.js

Answer 1

不要像在那里那样扔掉“裸”的Bootstrap列。

以下是您需要的工作：

首先创建一个Bootstrap容器（包含类.container或.container-fluid的div）。
然后在其中放入一个Bootstrap行（带有.row类的div）
然后将你的Bootstrap列放在那一行内。

这就是你如何使它发挥作用。并非不可能。

Bootstrap列始终需要.row作为父级，而Bootstrap行始终需要.container或.container-fluid作为父级。

参考：

https://getbootstrap.com/docs/4.0/layout/grid/

还值得一读：

Bootstrap网格如何在幕后工作：

http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works

注意：即使该文章讨论的是Bootstrap 3，所描述的原则也适用于Bootstrap 4网格。

Answer 2

你几乎没有选择。

用一些像
这样的超级div包裹你的return（）
return(<div className="container"><div className="row>...)
在您的根元素周围添加父div <div className="container"><div className="row"><div id="root">...
将内部div添加到root元素，然后将您的反应附加到您需要的任何内容。 ReactDOM.render(<App />, document.getElementById('myInnerElement'));

Reactjs - 使用Bootstrap类几乎是不可能的

2 个答案:

不要像在那里那样扔掉“裸”的Bootstrap列。