Question

我目前正在学习React，而我正试图在我的应用中渲染一些按钮。但是，当它们在页面中呈现时，它们都会显示所有组合在一起且没有默认边距。

Image of buttons rendered without default margin using React

我在呈现静态HTML版本时无法重现此问题：

Image of buttons rendered with default margin using HTML only

我根本不确定如何对此进行故障排除，我希望能够在React中使用Bootstrap，而无需添加自己的CSS。

如果有帮助的话，在我开始学习React之前尝试使用jQuery追加相同的按钮时，就会发生同样的事情。我当时也无法修复它。

反应代码：

import React, { Component } from 'react';

class Container extends Component {
    render() {
        return(
            <div className="container">
                <div className="panel panel-default question">
                    <Title/>
                    <Body/>
                </div>
            </div>
        )
    };
};

class Title extends Component {
    render() {
        return(
            <div className="panel-heading">
                <h3 className="panel-title">Panel Title</h3>
            </div>
        );
    };
};

class Body extends Component {
    render() {
        return(
            <div className="panel-body">
            <p className="panel-question">Question Content</p>
          <textarea className="form-control" rows="5" id="comment"></textarea>
          <div >
            <OptionList/>
          </div>
        </div>
        );
    };
};

class OptionList extends Component {
    render() {
        return(
            <div className="button-container text-center">
                <button type="button" className="btn btn-primary">Option 1</button>
                <button type="button" className="btn btn-primary">Option 2</button>
                <button type="button" className="btn btn-primary">Option 3</button>
                <button type="button" className="btn btn-primary">Option 4</button>
                <button type="button" className="btn btn-primary">Option 5</button>
            </div>
        );
    };
};

export default Container;

仅限HTML ：

<div class="container">
      <div class="panel panel-default question">
        <div class="panel-heading">
          <h3 class="panel-title">Panel Title</h3>
        </div>
        <div class="panel-body">
            <p class="panel-question">Question Content</p>
          <textarea class="form-control" rows="5"></textarea>
          <div >
            <div class="button-container text-center" id="button-container">
                <button type="button" class="btn btn-primary">Option 1</button>
                <button type="button" class="btn btn-primary">Option 2</button>
                <button type="button" class="btn btn-primary">Option 3</button>
                <button type="button" class="btn btn-primary">Option 4</button>
                <button type="button" class="btn btn-primary">Option 5</button>
              </div>
          </div>
        </div>
      </div>
    </div>

有谁知道如何克服这个问题？这会与其他React元素一起发生吗？感谢您的帮助和任何反馈！

编辑：

我没有使用任何自定义CSS，但该应用使用了create-react-app中的默认CSS：

App.css

.App {
  text-align: center;
}

.App-logo {
  animation: App-logo-spin infinite 20s linear;
  height: 80px;
}

.App-header {
  background-color: #222;
  height: 150px;
  padding: 20px;
  color: white;
}

.App-title {
  font-size: 1.5em;
}

.App-intro {
  font-size: large;
}

@keyframes App-logo-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

index.css

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

使用React时，Bootstrap（3）中的按钮在没有任何默认填充的情况下进行渲染

0 个答案: