Question

我正在做一个带引导风格的网站，但我对网格系统有疑问。我有以下结构：（在＆＃39; form-group＆＃39; div中，我需要为我的组合框添加一个标签，并在其下面添加一个加号图标和我的组合框。）

＆＃13;

<div class="row" style="padding-left: 15px;">

	<div class="form-group col-md-3">
		<label class="form-label">Label</label><br>

		<?php
			echo $this->Html->link('<i data-toggle="tooltip" data-placement="right" title="Click here" style="cursor: pointer;font-size: 18px;" class="fa fa-plus-circle"></i>',
				'#',
	
				array(
		       'data-toggle'=> 'modal',
		       'data-target' => '#OpenModal',
		       'escape' => false
		       )
			);
		?>

		<select></select>
	</div>

</div>

＆＃13;

但如果我这样编码，我的表格就像：

Answer 1

您需要将col宽度col-md-3增加到col-md-4或更多，以便它可以包含图标和输入，或者您需要通过删除边距和填充来覆盖col-md-3

这就是你想要做的事情

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
</head>
<body>

<div class="container">
  <div class="row" style="padding-left: 15px;">

    <div class="form-group col-md-3">
        <label class="form-label">Label</label><br>

            <i data-toggle="tooltip" data-placement="right" title="Click here" style="cursor: pointer;font-size: 18px;" class="fa fa-plus-circle"></i>




        <select></select>
    </div>

</div>

</body>
</html>

网格系统 - Bootstrap

1 个答案: