Question

我偶然发现React-Bootstrap。我查看了他们的文档，但我找不到任何关于居中文本的内容。像这样：

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

所以我想知道你是否可以使用相同的技术，而是将它应用于React开发。像这样举例如：

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

干杯！

Answer 1

React-Bootstrap 不继承Bootstrap样式。这意味着您必须导入css才能使用标准Bootstrap库中的类。

在官方文档中阅读this：

因为React-Bootstrap不依赖于非常精确的Bootstrap版本，所以我们不附带任何包含的CSS。但是，某些样式表是需要使用这些组件。您包含的引导程序样式和引导程序取决于您，但最简单的方法是包含CDN中的最新样式。

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


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap-theme.min.css">
对于更高级的用例，您还可以使用Webpack或Browserify等捆绑器在您的构建过程中包含css文件，但这超出了本指南的范围。另请参阅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>

Answer 2

您输入了拼写错误的 className。

Answer 3

我认为这个引导类会起作用

 <h1 className="m-auto"> text </h1>

React-Boostrap中心文本

3 个答案: