[英]Trying to align the text area and the button side by side
<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;
}
您正在使用col-md-5
作为按钮的容器div。
引导程序中的一行由12列组成
您必须将其更改为col-md-2
或减小textarea容器div的大小
如果col-md-2
不起作用,请确保重置默认的CSS
* { margin: 0 padding: 0 }
除了上述答案外,您还需要关闭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>
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>
我发现您的代码有两个问题,
col-md-5
类的第二个div
未正确关闭。 这是我认为应该解决的更新代码。
<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>
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.