我试图有一个列表,其中有一些列表项,每个都有一个标题,如“项目0”,标题下面的<small>
,在这个例子中,文本“描述项目0”,和然后在这个文本的右边“项目0”和“项目0描述”我想要一个选择菜单,在这个选择菜单的右边另一个选择菜单,如:
Item 0 select menu select menu
Description Item 0
这些元素应该垂直对齐。我没有用下面的代码实现这个布局你知道如何修复吗?
工作示例:
http://jsfiddle.net/fne5xLfv/1/
“描述项目0”不在“项目0”下面,选择菜单位于不在右侧的文本下方,且元素没有垂直对齐。
HTML:
<div class="container py-5">
<div class="row no-gutters">
<div class="col-12 col-lg-8">
<div class="card">
<div class="card-header">
<h5 class="text-heading-blue mb-0 font-weight-semi-bold">Title</h5>
</div>
<div class="card-body">
<ul class="list-group">
<li class="list-group-item">
<span>Item 0</span>
<span>Description Item 0</span>
<form>
<select class="custom-select form-control">
<option selected="">0</option>
<option>1</option>
<option>2</option>
</select>
</form>
<form>
<select class="custom-select form-control">
<option selected="">0</option>
<option>1</option>
<option>2</option>
</select>
</form>
</li>
<li class="list-group-item">
<span>Item 1</span>
<span>Description Item 1</span>
<form>
<select class="custom-select form-control">
<option selected="">0</option>
<option>1</option>
<option>2</option>
</select>
</form>
<form>
<select class="custom-select form-control">
<option selected="">0</option>
<option>1</option>
<option>2</option>
</select>
</form>
</li>
<li class="list-group-item">
<span>Item 2</span>
<span>Description Item 2</span>
<form>
<select class="custom-select form-control">
<option selected="">0</option>
<option>1</option>
<option>2</option>
</select>
</form>
<form>
<select class="custom-select form-control">
<option selected="">0</option>
<option>1</option>
<option>2</option>
</select>
</form>
</ul>
</div>
<div class="card-footer">
<button type="button" class="float-right btn">Next</button>
</div>
</div>
</div>
答案 0 :(得分:0)
这样的东西你需要什么?如果没有,请提供更多信息以及您的html和CSS尝试...
.list-group-item{
list-style-type: none;
}
<div class="col-12 col-lg-8">
<div class="card">
<div class="card-header">
<h5 class="text-heading-blue mb-0 font-weight-semi-bold">Title</h5>
</div>
<div class="card-body">
<ul class="list-group">
<li class="list-group-item">
<form>
<label style="display:inline-block; width:150px">Item 0</label>
<select class="custom-select form-control" style="display:inline-block;width:200px">
<option selected="">0</option>
<option>1</option>
<option>2</option>
</select>
</form>
<form>
<label style="display:inline-block; width:150px">Description Item 0</label>
<select class="custom-select form-control" style="display:inline-block;width:200px">
<option selected="">0</option>
<option>1</option>
<option>2</option>
</select>
</form>
</li>
<br>
<li class="list-group-item">
<form>
<label style="display:inline-block; width:150px">Item 1</label>
<select class="custom-select form-control" style="display:inline-block;width:200px">
<option selected="">0</option>
<option>1</option>
<option>2</option>
</select>
</form>
<form>
<label style="display:inline-block; width:150px">Description Item 1</label>
<select class="custom-select form-control" style="display:inline-block;width:200px">
<option selected="">0</option>
<option>1</option>
<option>2</option>
</select>
</form>
</li>
</ul>
</div>
</div>
</div>
我做了什么:
已移动Span
内的form
,将其更改为Label
,为Label和Select
添加了一些内联样式,修复宽度并使其成为内联对齐
答案 1 :(得分:0)
嗨,我想我明白你想要的,请检查一下。
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css">
</head>
<body>
<div class="container py-5">
<div class="row">
<div class="col-sm-4">
<div>item 0</div>
<div>description item 0</div>
</div>
<div class="col-sm-4">
<div>
<select name="" id="">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
<div class="col-sm-4">
<div>
<select name="" id="">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
</div>
<div class="row ">
<div class="col-sm-4">
<div>item 1</div>
<div>description item 1</div>
</div>
<div class="col-sm-4">
<div>
<select name="" id="">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
<div class="col-sm-4">
<div>
<select name="" id="">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div>item 2</div>
<div>description item 2</div>
</div>
<div class="col-sm-4">
<div>
<select name="" id="">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
<div class="col-sm-4">
<div>
<select name="" id="">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
</div>
</div>
</body>
</html>
所以bootstrap将你的屏幕划分为12列,当你说<div class="col-sm-4"></div>
这意味着你将12个中的4列提供给这个div。