<div class="row"> <div class="col-lg-6"></div> <div class="col-lg-2"></div> <div class="col-lg-4"> <div class="input-group" > <input type="text" id="search" class="form-control input-lg" placeholder="请输入你要检索的名字..."> <span class="input-group-addon btn btn-mint" onclick="search()">搜索</span> </div> </div> </div>这段代码的input-group-addon btn btn-mint和input-group在检查时居中长度可变的,但在预览html页面时却靠左切长度固定
时间: 2023-06-23 11:09:18 浏览: 52
这可能是因为你在代码中没有为input-group和input-group-addon设置样式。你可以尝试在CSS中设置这些元素的样式,例如:
```
.input-group {
display: flex;
justify-content: center;
align-items: center;
}
.input-group-addon {
width: 100px; /* 你可以根据需要设置宽度 */
text-align: center;
}
```
这样可以将input-group和input-group-addon居中,并且input-group-addon的宽度会固定。你可以根据自己的需要进行调整。
相关问题
<div class="container"> <div class="row clearfix"> <div class="col-md-12 column"> <div class="page-header" > <h1 > <small style="color: red">查询书籍</small> </h1> </div> </div> </div>中实现出样式每一行颜色可变
可以通过CSS样式表来实现每一行颜色可变。可以通过以下代码实现:
```CSS
tr:nth-child(even) {
background-color: #f2f2f2;
}
```
将上述代码添加到CSS样式表中,然后将表格的class属性设置为"table"即可。
```HTML
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<div class="page-header">
<h1>
<small style="color: red">查询书籍</small>
</h1>
</div>
<table class="table">
<thead>
<tr>
<th>书名</th>
<th>作者</th>
<th>出版社</th>
</tr>
</thead>
<tbody>
<tr>
<td>三体</td>
<td>刘慈欣</td>
<td>重庆出版社</td>
</tr>
<tr>
<td>活着</td>
<td>余华</td>
<td>作家出版社</td>
</tr>
<tr>
<td>围城</td>
<td>钱钟书</td>
<td>人民文学出版社</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
```
这样,表格每一行的颜色都会交替变化。
在这个代码中再加一个类型,颜色和重量。<div class="container"> <div class="row"> <div class="col-md-12"> <div class="table-responsive"> <table class="table cart-table"> <thead> <tr> <th>商品</th> <th>单价</th> <th> 数 量 </th> <th>总价</th>
好的,可以根据您的需求在表格中再添加类型、颜色和重量等列。修改后的代码如下所示:
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="table-responsive">
<table class="table cart-table">
<thead>
<tr>
<th>商品</th>
<th>单价</th>
<th>数量</th>
<th>类型</th>
<th>颜色</th>
<th>重量</th>
<th>总价</th>
</tr>
</thead>
<tbody>
<tr>
<td>商品1</td>
<td>10</td>
<td>2</td>
<td>类型1</td>
<td>红色</td>
<td>1kg</td>
<td>20</td>
</tr>
<tr>
<td>商品2</td>
<td>20</td>
<td>1</td>
<td>类型2</td>
<td>蓝色</td>
<td>500g</td>
<td>20</td>
</tr>
<tr>
<td>商品3</td>
<td>30</td>
<td>3</td>
<td>类型3</td>
<td>绿色</td>
<td>2kg</td>
<td>90</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>