リアクトブーストラップの中央のテキスト

Question

私はちょうどReact-Bootstrapにつまずいた。私は彼らのドキュメントを見ましたが、テキストのセンタリングについては何も見つかりませんでした。このように：

<h1 class="text-center">Hello World</h1> 

私はあなたが同じテクニックを使用できるかどうか疑問に思っていましたが、代わりにそれをリアクション開発に適用しました。このように例：

<h1 classnName="text-center">Hello World</h1> 

乾杯！

Answer 1

リアブートストラップは、ブートストラップスタイルを継承しません。つまり、標準のBootstrapライブラリにあるクラスを使用するには、cssをインポートする必要があります。公式ドキュメントの

読むthis：リアクト - ブートストラップは、ブートストラップの非常に正確なバージョンに依存しないので

、我々はどんな含まCSSは付属していません。ただし、これらのコンポーネントを使用するには、のスタイルシートが必要です。どのようなブートストラップスタイルを含めるかはあなた次第ですが、最も簡単な方法はCDNの最新のスタイルを含めることです。より高度な使用例については

<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css"> 

<!-- Optional theme --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap-theme.min.css"> 

また、あなたのビルドプロセスの一環として、あなたのためのCSSファイルを含めるようにWebPACKのかBrowserifyのようなバンドラを使用することができますが、それは、このガイドの範囲を超えています。コンポーネントの使用に合わせてスタイルシートをカスタマイズする方法の詳細については、http://getbootstrap.com/customize/を参照してください。あなたがスタイルをインポートしたら

---

だから、あなたが行うことができる必要があります：

<h1 className="text-center">Hello World</h1> 

けれども、あなたも正しくclassNameを綴る必要があるだろう。また

const MyApp =() => <h1 className="text-center">Hello World!</h1>; 
 

 
ReactDOM.render(<MyApp />, document.getElementById("app"))

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="app"></div>

---

あなたが好むならば、あなたは常にこのよう、カスタムインラインスタイルを定義することができます。

<h1 style={{textAlign: "center"}}>Hello World</h1>