使用 css 对齐组件答案

【问题标题】：alignment of component using css使用 css 对齐组件
【发布时间】：2022-01-21 05:15:17
【问题描述】：

我想将fileselector 与dropdown 列表或下拉列表作为文件选择器。我对两者都很好。我的意思是它们应该大小相同且对齐。

<div>
<Row>
            <div className="col-sm-5 text-left">
              Please select the language:{' '}
            </div>
            <div>
              <div className="col-sm-7  text-center">
                <select >
                  <option >
                    Please select the language from list
                  </option>    
                    <option key={ctr} value={ctr}>
                      {ctr}
                    </option>

                </select>
              </div>
            </div>
          </Row>

          <Row>
            <div className="col-sm-6 text-left">
              Please select the file to upload:
            </div>
            <div className="col-sm-5 text-center">
              <input
                type="file"
                accept=".json"
                className="form-control form-sm-control"
                name="file"
                required
              />
            </div>
          </Row>             
        </div>

实际上我不是 UI 开发人员，但我尝试并努力完成它。它仍然没有到来。能否请你帮忙。如果您可以建议，我可以使用其他库或纯 CSS。

【问题讨论】：

Row 不是 HTML 元素。你在使用像 React 这样的库吗？您的屏幕截图似乎表明您没有正确使用它。请标记您的 Bootstrap 版本。

标签： html css twitter-bootstrap

【解决方案1】：

Boostrap 中的row 不是一个类吗？像这样：

<div class="row">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>

https://getbootstrap.com/docs/5.1/layout/columns/

如上所述，<Row> 可能是您创建的 React 组件，没有更多信息很难在此处调试。

【讨论】：