我偶然发现React-Bootstrap
。我查看了他们的文档,但我找不到任何关于居中文本的内容。像这样:
<h1 class="text-center">Hello World</h1>
所以我想知道你是否可以使用相同的技术,而是将它应用于React开发。像这样举例如:
<h1 classnName="text-center">Hello World</h1>
干杯!
答案 0 :(得分:5)
React-Bootstrap 不继承Bootstrap样式。这意味着您必须导入css才能使用标准Bootstrap库中的类。
在官方文档中阅读this:
因为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/,了解有关自定义样式表以匹配组件使用的详细信息。
因此,一旦您导入了样式,您应该能够:
<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>
答案 1 :(得分:0)
您输入了拼写错误的 className。
答案 2 :(得分:0)
我认为这个引导类会起作用
<h1 className="m-auto"> text </h1>