ReactJS 水平对齐 material-ui 元素答案

【问题标题】：ReactJS align material-ui elements horizontallyReactJS 水平对齐 material-ui 元素
【发布时间】：2016-06-29 23:05:14
【问题描述】：

我正在尝试在文本输入旁边设置一个单选按钮，这样用户基本上可以输入问题的“答案”并标记一个首选。然而，Material-UI 将每一个都放在自己的行上。

这是我目前拥有的：

<div>
   <RadioButton
      value="light"
   />
   <TextInput
       hintText="Answer"
       multiLine = {true}
   />
</div>

【问题讨论】：

标签： css reactjs material-ui

【解决方案1】：

您有一个style 对象可用于覆盖 Material-Ui 中元素的默认样式。使用它并将显示设置为内联块。

display: inline-block;

【讨论】：

@erichardson30 它解决了你的问题还是你需要别的东西？
我还没有机会尝试，但我今天会告诉你
我在每个元素中都添加了 style={{display: 'inline-block'}} 并且没有任何区别
@WitVault 它对我有用，但不是很灵活。最终我选择了react-inline-grid。花了大约 2 分钟。
@Trenton 我刚刚尝试过react-inline-grid，但我收到了错误，说 react-redux 有什么问题，似乎需要 react-redux ：/

【解决方案2】：

我正在使用 react-inline-grid 进行 Material-ui 的布局，它有助于解决许多问题并使代码对布局更加明确（而且它是响应式的）。

<Grid>
  <Row is="nospace start">
    <Cell is="9 tablet-6 phone-3">
       <TextField ... />
    </Cell>
    <Cell is="middle 3 tablet-2 phone-1">
       <RaisedButton ... />
    </Cell>
  </Row>
</Grid>

【讨论】：

很棒的发现。这个功能需要在 Material-UI 中。现在，Material-UI 中的水平布局很难。
is 参数是开箱即用还是需要安装 Bootstrap？
根据您在此处的回答，我发现 ReactGridLayout 看起来很相似，但在断点中更加明确。
谢谢大家，我会检查这两个选项！
@LarryMaccherone 根本不需要引导程序...它只是 material-ui...is 只是来自react-inline-grid 的 {Grid, Row, Cell} 的参数

【解决方案3】：

为了记录，我设法使用 flexboxgrid 对齐单选按钮...做了这样的事情：

      <div className="row">
        <div className="col-md-2">
          Type:
        </div>
        <div className="col-md-10">
          <RadioButtonGroup
             className="row"
             name="type">
            <RadioButton
               className="col-md-4"
               value="other"
               label="Other" />
            <RadioButton
               className="col-md-4"
               value="custom"
               label="Custom" />
          </RadioButtonGroup>
        </div>
      </div>

【讨论】：