twitter-bootstrap React-Boostrap 中心文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45012649/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React-Boostrap center text
提问by Martin Nordstr?m
I just stumbled upon React-Bootstrap. I looked at their docs, but I couldn't find anything about centering text. Like this:
我只是偶然发现React-Bootstrap。我查看了他们的文档，但找不到有关居中文本的任何信息。像这样：
<h1 class="text-center">Hello World</h1>
So I was wondering if you can use the same technic, but apply it for React development instead. Like this for example:
所以我想知道您是否可以使用相同的技术，但将其应用于 React 开发。像这样例如：
<h1 classnName="text-center">Hello World</h1>
Cheers!
干杯!
采纳答案by Chris
React-Bootstrap does notinherit the Bootstrap styles. This means that you must import the css in order to use the classes that are in the standard Bootstrap library.
React-Bootstrap不继承 Bootstrap 样式。这意味着您必须导入 css 才能使用标准 Bootstrap 库中的类。
Read thison the official documentation:
在官方文档中阅读此内容：
Because React-Bootstrap doesn't depend on a very precise version of Bootstrap, we don't ship with any included css. However, some stylesheet is requiredto use these components. How and which bootstrap styles you include is up to you, but the simplest way is to include the latest styles from the 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">For more advanced use cases you can also use a bundler like Webpack or Browserify to include the css files for you as part of your build process but that is beyond the scope of this guide. Also see http://getbootstrap.com/customize/for details about customizing stylesheets to match your component use.
因为 React-Bootstrap 不依赖于一个非常精确的 Bootstrap 版本，所以我们不附带任何包含的 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">对于更高级的用例，您还可以使用 Webpack 或 Browserify 之类的捆绑器为您包含 css 文件作为构建过程的一部分，但这超出了本指南的范围。另请参阅http://getbootstrap.com/customize/，了解有关自定义样式表以匹配您的组件使用的详细信息。
So once you've imported the styles, you should be able to do:
因此，一旦您导入了样式，您应该能够执行以下操作：
<h1 className="text-center">Hello World</h1>
Though, you'd have to spell classNamecorrectly too.
不过，您也必须拼写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>Alternatively, you can always define custom inline-styles if you'd prefer, like this:
或者，如果您愿意，您始终可以定义自定义内联样式，如下所示：
<h1 style={{textAlign: "center"}}>Hello World</h1>
