0
Я создаю модальный код и вам нужно поместить метки не поверх элементов ввода/выбора, поскольку они будут помещаться по умолчанию, но слева от элемента управления. Plunker. Пожалуйста, щелкните значок под заголовком Outlet, чтобы увидеть модальный.Поместите меток Bootstrap слева от элемента управления
Как поместить метку слева от элемента управления, чтобы оба они были равномерно размещены на одной линии? То, как я это делал (с тегами <h4>), похоже на способ Bootstrap для меня. Нужно ли использовать этикетки, а не <h4>?
В каждой строке указано 2 надписи и 2 элемента управления, как показано на Plunker. Также как я могу контролировать размер шрифта меток внутри модального?
Код:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>F Trace</title>
<!-- Bootstrap core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="../../assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="style.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="../../assets/js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Modal Outlet Access-->
<div class="modal fade adduser" id="outletaccess" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Доступ к объекту</h4>
</div>
<div class="modal-body">
<div class='form-group form-group-sm'>
<div class='row'>
<div class='col-xs-12'>
<h4>User name/outlet name</h4>
</div>
</div>
</div>
<div class='form-group form-group-sm'>
<div class='row'>
<div class='col-xs-12'>
<h4><i class="fa fa-filter fa-2x"></i>Sort</h4>
</div>
</div>
</div>
<div class='form-group form-group-sm'>
<div class='row'>
<div class="col-xs-3">
<h4>Region</h4>
</div>
<div class="col-xs-3">
<div class='form-group'>
<select class='form-control'>
<option>all</option>
<option>all</option>
<option>all</option>
</select>
</div>
</div>
<div class="col-xs-3">
<h4>Outlet class:</h4>
</div>
<div class="col-xs-3">
<div class='form-group'>
<select class='form-control'>
<option>Store</option>
<option>Store</option>
<option>Store</option>
</select>
</div>
</div>
</div>
</div>
<div class='form-group form-group-sm'>
<div class='row'>
<div class="col-xs-3">
<h4>Area:</h4>
</div>
<div class="col-xs-3">
<div class='form-group'>
<select class='form-control'>
<option>all</option>
<option>all</option>
<option>all</option>
</select>
</div>
</div>
<div class="col-xs-3">
<h4>Outlet type:</h4>
</div>
<div class="col-xs-3">
<div class='form-group'>
<select class='form-control'>
<option>type</option>
<option>type</option>
<option>type</option>
</select>
</div>
</div>
</div>
</div>
<div class='form-group form-group-sm'>
<div class='row'>
<div class="col-xs-3">
<h4>City:</h4>
</div>
<div class="col-xs-3">
<div class='form-group'>
<select class='form-control'>
<option>city</option>
<option>city</option>
<option>city</option>
</select>
</div>
</div>
<div class="col-xs-3">
<h4>Company:</h4>
</div>
<div class="col-xs-3">
<div class='form-group'>
<select class='form-control'>
<option>all</option>
<option>all</option>
<option>all</option>
</select>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Discard</button>
<button type="button" class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
<section id='top5'>
<div class='row'>
<div class='col-md-12 settings'>
<table class="table text-center custom-table">
<thead>
<tr>
<th width="20%">Name</th>
<th width="3%">Rep</th>
<th width="13%">Phone</th>
<th width="10%">E-mail</th>
<th width="10%">Level</th>
<th width="12%"><div>Access to</div><div class='controls'><i class="fa fa-bolt"></i><i class="fa fa-tint"></i><i class="fa fa-lightbulb-o"></i><i class="fa fa-yelp"></i><i class="fa fa-sun-o"></i><i class="fa fa-cogs"></i></div></th>
<th width="5%">Outlet</th>
<th width="5%">Edit</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td class="vert-align"><input type='checkbox'></input></td>
<td>777 123 4455</td>
<td>[email protected]</td>
<td>Admin</td>
<td class="vert-align checkboxes"><input type='checkbox'></input><input type='checkbox'></input><input type='checkbox'></input><input type='checkbox'></input><input type='checkbox'></input><input type='checkbox'></input></td>
<td class="vert-align"><i data-toggle="modal" data-target="#outletaccess" class="fa fa-industry"></td>
<td class="vert-align"><i class="fa fa-pencil-square-o"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
Сначала вы добавляете к оповещению с 'col-xs-3' и' col-xs-9', одна строка равна 'col-xs-12' вместо четырех' col-xs-3 '. Затем вам нужно удалить теги 'h4' вместо тега label и установить' font-size' в класс '.form-group label 'css. –
Не могли бы вы поместить здесь строки кода, чтобы я мог улучшить его? –