Question

我正在为我的库存系统制作创建配方页面。我在配料部分的布局上遇到了麻烦。我正在使用Twitter Bootstrap。这就是我想要发生的事：http://puu.sh/h5HL5/0d5a69d83f.jpg

这是我的成分部分的代码：

        <!--Quantity -->
            <div class="col-md-1">
                <input class="form-control" id="qty" type="text" placeholder="Qty">
            </div>

        <!--Unit of Ingredient -->
            <div class="col-md-4">
                <div class="dropdown">
                <form class="form-inline">
                    <button class="btn btn-default dropdown-toggle" type="button" id="unitIngredient" data-toggle="dropdown" aria-expanded="true"> 
                    Unit of Ingredient
                        <span class="caret"></span>
                    </button>

                    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> 
                        <li role="presentation"><a href="#">Pack/s</a></li>
                        <li role="presentation"><a href="#">Liter/s</a></li>
                    </ul>
                </div>

        <!--Ingredient Name-->
                <div class="dropdown">
                    <button class="btn btn-default dropdown-toggle" type="button" id="nameIngredient" data-toggle="dropdown" aria-expanded="true"> Ingredient Name
                        <span class="caret"></span>
                    </button>

                    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2"> 
                        <li role="presentation"><a href="#">Meat </a></li>
                    </ul> 
                </div>
                </form>
            </div>


        <!-- Button to delete row of ingredient in the recipe -->

            <div class="col-md-2">
                <button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            </div>

//继续

            <div class="col-md-2">
                <button type="button" class="btn btn-s btn-warning">
                    Add New Item
                </button>
            </div>
        </form>
        </form>
        <!-- Button to add new ingredient to recipe-->

        <div class="form-group">

            </br> </br>
            <button type="button" class="btn btn-s btn-warning"> 
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
            Add Ingredient</button>

        </div>

Answer 1

将class="container"替换为class="container text-center"

如何在Bootstrap [库存系统]中对齐成分表格

1 个答案: