将Bootstrap模态标签放在控件的左侧

时间:2016-01-06 22:58:46

标签: css html5 twitter-bootstrap

我正在构建一个模态,并且需要将标签放在输入/选择控件的顶部,因为它们将默认放置在控件的左侧。 Plunker。请单击Outlet标题下的图标以查看模态。

如何在控件左侧放置标签,使两者均匀放置在同一条线上?我这样做的方式(使用<h4>标签)感觉不像我的Bootstrap方式。我是否需要使用标签,而不是<h4>

如Plunker所示,每行将有2个标签和2个控件。 另外如何控制模态中标签的字体大小?

代码:

<!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">&times;</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>contact@company.com</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>

1 个答案:

答案 0 :(得分:1)

问题是select的引导样式如下

&#13;
&#13;
.form-control {
    display: block;
    width: 100%;
  }
&#13;
&#13;
&#13;

所以你需要将其改为

&#13;
&#13;
.form-control {
  width: auto;
  display: inline-block;
}
&#13;
&#13;
&#13; 并将标签放在与选择相同的div中。当然,使用标签比使用h4更好。

比起你需要它看起来好看的风格 - 这是核心理念。 这是您的Plunker分叉