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

Question

   <form class="container">
      <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 class="col-md-5">
           <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>

我试图将按钮移至灰色框的右侧，以使所有文本框和按钮彼此水平。

试图对div类col-md-5进行内联阻止，但它会将所有内容垂直移动。

这是CSS：

h2{
font-family: "Times New Roman", Times, serif;
font-style: normal;
}


ul{
    list-style-type: none;

}
.col-md-5{
     margin: auto;
}
*{ margin: 0; padding: 0; }


#template,
#render,
#values {

     width: 100%;
    min-height: 300px;
    resize: vertical;
    font-family: "Courier New", Courier, monospace;
    border: 1px solid #ccc;

}



#render {
    background: #eee;
}

Answer 1

您将col-md-5用作按钮的容器div。

在引导程序中，一行包含12列

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

如果col-md-2不起作用，请确保重置默认的CSS

* { margin: 0 padding: 0 }

Answer 2

除了上述答案外，您还需要关闭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>

Answer 3

Bootstrap采用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>

Answer 4

我发现您的代码有两个问题，

1. 类别为div的第二个col-md-5未正确关闭。
2. 根据引导程序准则，列号的总和应连续为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>

Answer 5

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>