Javascript 尝试将文本区域和按钮并排对齐

样板 提供 {this.state.load | | |！this.state.data？

：{this.state.data.toString.replace/•/g，}}

---

col-md-5的总数将增加到15。您需要将按钮设置为上面注释的col-md-2，也可以将所有按钮设置为col-md-4

   <form class="container">
  <div class="row">

     <div class="col-md-4">
        <h2>Template</h2>
        <textarea id="template" value={this.state.value1} placeholder=" Hello {{name}}! {% if test -%} How are you?{%- endif %}" onChange={this.handleChange1.bind(this)}/>

     </div>
     <div class="col-md-4">
     <h2>Render</h2>
     <div id="render"> {this.state.loading || !this.state.data ? < div id="render"></div> : <div>{this.state.data.toString().replace(/•/g, " ")}</div>}
     </div>
     <div class="col-md-4">
       <input type="button" class="btn btn-success" id="convert" value="Convert" onClick={this.click} disabled={this.state.isLoading}/>
       <input type="button" class="btn btn-danger" id="clear" value="Clear" onClick={this.resetForm}/>
     </div>
  </div>

---

引导采用12列系统。您的总数加起来是15个，强制按钮进入下一行。尝试将最后一列更改为以下内容：

<div class="col-md-2">
           <input type="button" class="btn btn-success" id="convert" value="Convert" onClick={this.click} disabled={this.state.isLoading}/>
           <input type="button" class="btn btn-danger" id="clear" value="Clear" onClick={this.resetForm}/>
         </div>

您正在为按钮的容器分区使用col-md-5

引导中的一行由12列组成

您必须将其更改为col-md-2或减小textarea的container div的大小

如果col-md-2不工作，请确保重置解除css

* { margin: 0 padding: 0 }

---

我发现你的代码有两个问题

col-md-5级的第二分区未正确关闭。 如果您遵循12列网格系统，则根据引导指南，列数的总和应为12行。 这是我认为应该解决它的更新代码

<div class="row">
  <div class="col-md-5">
    <h2>Template</h2>
    <textarea id="template" value={this.state.value1} placeholder=" Hello {{name}}! {% if test -%} How are you?{%- endif %}" onChange={this.handleChange1.bind(this)}/>
  </div>
  <div class="col-md-5">
    <h2>Render</h2>
    <div id="render"> {this.state.loading || !this.state.data ?
      <div id="render"></div> :
      <div>{this.state.data.toString().replace(/•/g, " ")}</div>}
    </div>
  </div>
  <div class="col-md-2">
    <input type="button" class="btn btn-success" id="convert" value="Convert" onClick={this.click} disabled={this.state.isLoading}/>
    <input type="button" class="btn btn-danger" id="clear" value="Clear" onClick={this.resetForm}/>
  </div>
</div>

---

除了上面的答案，您还需要关闭textarea标签。它不是自动关闭的

    <form class="container">
        <div class="row">

            <div class="col-md-6">
                <h2>Template</h2>
                <textarea id="template" value={this.state.value1} placeholder=" Hello {{name}}! {% if test -%} How are you?{%- endif %}" onChange={this.handleChange1.bind(this)}> </textarea>

            </div>
            <div class="col-md-3">
                <h2>Render</h2>
                <div id="render"> {this.state.loading || !this.state.data ? < div id="render"></div> : <div>{this.state.data.toString().replace(/•/g, " ")}</div>}
            </div>
            <div class="col-md-3">
                <input type="button" class="btn btn-success" id="convert" value="Convert" onClick={this.click} disabled={this.state.isLoading}/>
                <input type="button" class="btn btn-danger" id="clear" value="Clear" onClick={this.resetForm}/>
            </div>
            </div>
    </form>

---

假设你使用的是引导，你需要确保你的总数加起来是12。md-5*3=15，因此它将强制它到下一行。试着做你的最后一个div col md-2@Jim请参阅下面关于答案的评论。这不起作用。它向下移动按钮，向上移动框。不幸的是，按钮仍然卡在文本框的底部。我在问题中添加了css。@Jim，这是因为您的按钮超出了col-md-2给出的宽度。减小按钮大小并将其显示更改为块。另一个选择是减小textarea容器的大小并放大按钮的div容器。那就行了。