Question

我在Jsx上有一些经验，今天我正在看一个React项目。希望我可以对样式进行一些更改。认为这就像是本机反应，但它具有自举功能，即使在他们的网站上停留了一个小时，我也无法将其包裹住。

我只想向左移动一个容器。我以为很简单，但是使用引导程序却很乏味。
<div className="container" >

下面的样式怎么样？那有什么意思。我该怎么解密？
<div className="shadow component rounded p-5 col-sm-10 col-md-6 mt-4">

这里的任何人都有一个快速备忘单或一个不错的教程，可以分享给我，也许可以给我快速的解决方法，让我立即尝试如何进一步了解bootstrap或将其完全贬值。 >

render() {
    return (
***//this box is in middle of the screen and I want to push it a little to the left***.
        <div className="container" > 
          <Notifications />
          <div className="row">
            <div className="shadow component rounded p-5 col-sm-10 col-md-6 mt-4">
              <form noValidate onSubmit={this.onSubmit}>
                <h1 className="h3 text-center mb-3 font-weight-normal h1" 
.
.
.
.
.

Answer 1

如果您知道了它，并且实际上很简单，就无需对其进行“解密”。

Bootstrap基本上是CSS 框架，其中包含用于印刷术，表单，按钮和其他界面组件的CSS模板。

例如：通过将shodow类添加到div中，它指的是预定义的CSS样式：

.shadow {
   box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
}

如果添加rounded类将添加更多CSS：

.rounded {
   border-radius: .25rem!important;
}

以此类推..这只是为了缩短时间，因此您无需自己编写代码。

这里是免费的在线课程：Bootstrap Beginner Crash Course

回到主要问题。.首先，请确保您的React项目中已经包含Bootstrap，如果完成，则无需移动整个container Bootstrap 4网格系统正在使用Flexbox默认情况下，row类已经具有display: flex;，因此您可以在auto margins子div中使用row。参见示例：

示例：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="p-2 border">Flex item</div>
    <div class="p-2 border">Flex item</div>
    <div class="p-2 border ml-auto">Left Flex item</div>
  </div>
</div>

自动边距如何工作？

当您将Flex对齐方式与自动页边距混合使用时，Flexbox可以做一些很棒的事情。下面显示了通过自动边距控制弹性项目的三个示例：默认（无自动边距），向右推送两个项目（.mr-auto）和向左推送两个项目（.ml-auto）。 Docs

因此，在您的情况下，您只需要向 component div中添加 ml-auto 类：

<div className="shadow component rounded p-5 col-sm-10 col-md-6 mt-4 ml-auto"></div>

加强带网格系统

1 个答案: