具有垂直列跨度的自定义引导网格

时间:2020-04-03 20:25:07

标签: twitter-bootstrap-3 grid

[![具有垂直列跨度的自定义引导容器] [1]] [1]

嗨! 我需要这个特殊的引导网格。左第一列应跨过徽标。 有人有一个简单的html示例吗?

先谢谢! 迈克

我当前的代码,但是效果不佳:

嗨! 我需要这个特殊的引导网格。左第一列应跨过徽标。 有人有一个简单的html示例吗?

先谢谢! 迈克

我当前的代码,但是效果不佳:

            <div class="container-fluid">
            <div class="row">
                <div class="col-md-8">
                    <img src="/img/logo.png" class="img-responsive left-aligned" alt="logo">
                </div>
                    <div class="col-md-4">
                        <div class="row">
                            <div class="col-md-12">Label A
                            </div>
                        <div class="col-md-12">Label C
                        </div>
                            <div class="col-md-8">

                                <div class="col">
                                    <label class="col-md-2 text-right">Label D</label>
                                </div>

                                <div class="col-md-8">
                    <select class="form-control">
                        <option value="cheese">cheese</option>
                        <option value="tomatoes">tomatoes</option>
                        <option value="mozarella">mozarella</option>
                        <option value="mushrooms">mushrooms</option>
                        <option value="pepperoni">pepperoni</option>
                        <option value="onions">onions</option>
                    </select>
                </div>

                            </div>
                        </div>
                    </div>
            </div>
                <div class="col-md-8">

                    <div class="col">
                        <label class="col-md-2 text-right">Label C</label>
                    </div>

                    <div class="col-md-10">
                        <form method="post" role="search">
                            <div class="input-group input-group">
                                <input type="text" class="form-control" placeholder="Search product">
                                <span class="input-group-btn">
                                    <button class="btn btn-default" type="button"><i class="fa fa-search"></i></button>
                                </span>
                            </div>
                        </form>
                    </div>



                </div>
                 <div class="col-md-4">

                    <div class="col">
                        <label class="col-md-2 text-right">Label D</label>
                    </div>

                    <div class="col-md-8">
                        <select class="form-control">
                            <option value="blue">blue</option>
                            <option value="red">red</option>
                            <option value="green">green</option>
                            <option value="black">black</option>
                        </select>
                    </div>

                </div>
            </div>

0 个答案:

没有答案