Twitter bootstrap Reactjs-使用引导类几乎是不可能做到的_Twitter Bootstrap_Reactjs_Api_Bootstrap 4

Twitter bootstrap Reactjs-使用引导类几乎是不可能做到的

twitter-bootstrap reactjs api bootstrap-4

Twitter bootstrap Reactjs-使用引导类几乎是不可能做到的,twitter-bootstrap,reactjs,api,bootstrap-4,Twitter Bootstrap,Reactjs,Api,Bootstrap 4,当我必须在一个网格中呈现整个react应用程序时，如何使用class='col-6'这样的引导类来创建网格系统？它适用于相对的实体元素，而不是实际的实体元素在index.html中 <!DOCTYPE html> <html lang="en"> <body> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device

当我必须在一个网格中呈现整个react应用程序时，如何使用class='col-6'这样的引导类来创建网格系统？它适用于相对的实体元素，而不是实际的实体元素

在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>

在index.js中

千万不要像你在那里做的那样，在一个赤裸裸的引导栏中插入。以下是使其正常工作所需的：

首先用class.container或.container流体创建一个引导容器div。然后使用.row类在div中放置一个引导行然后将引导列放在该行中。这就是你能让它工作的方法。并非不可能

引导列始终需要.row作为父级，引导行始终需要.container或.container流体作为父级

参考：

也值得一读：

引导网格在幕后的工作方式：

注意：尽管这篇文章讨论的是bootstrap3，但所描述的原则也适用于bootstrap4网格。

您几乎没有选择

在你的回归中加入一些像

废话。我很久没碰前端了。我忘记了行、容器类。谢谢：

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>
    );
  }
}

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';


let render = ()=>{
    ReactDOM.render(<App />, document.getElementById('root'));
};

render(); // render the application

registerServiceWorker();

export {render};