Question

css文件

.columnForm {
   display: inline-block;
}

html文件

<div class="row" style="height:100px;">
        <div class="col-md-9 col-md-offset-1">          
            <form class="columnForm" name="columnForm">
                <label style="font-size:12px; text-align:center;">Add a new column</label>
                <div>
                    <div class="input-group">
                        <input id="newcolumn"
                               name="newcolumn"
                               type="text"
                               ng-model="newcolumn"
                               class="form-control input-lg"
                               placeholder="enter a column name"
                               style="font-size:12px; float:left;" />
                        <button id="addButton"
                                name="addButton"
                                style="text-align:center; float:right"
                                ng-click="addColumn()"
                                class="btn btn-info form-control input-lg">
                            Add
                        </button>
                    </div>
                </div>
            </form>    
        </div>
    </div>

我希望它们并排覆盖整个行，但是上面的这段代码将它们都放在屏幕的左侧，一个放在另一个的顶部。

Answer 1

使用input-group DIV作为伸缩容器并让孩子成长以填充所有空间就足够了

.input-group{
  display: flex
}

.input-group > #newcolumn {
  flex-grow: 2
}

.input-group > #addButton {
  flex-grow: 1
}

<div class="row" style="height:100px;">
    <div class="col-md-9 col-md-offset-1">          
        <form class="columnForm" name="columnForm">
            <label style="font-size:12px; text-align:center;">Add a new column</label>
            <div>
                <div class="input-group">
                    <input id="newcolumn"
                           name="newcolumn"
                           type="text"
                           ng-model="newcolumn"
                           class="form-control input-lg"
                           placeholder="enter a column name"
                           style="font-size:12px; float:left;" />
                    <button id="addButton"
                            name="addButton"
                            style="text-align:center; float:right"
                            ng-click="addColumn()"
                            class="btn btn-info form-control input-lg">
                        Add
                    </button>
                </div>
            </div>
        </form>    
    </div>
</div>

更新：

如果您希望任何一个组件比另一个组件占用更多的空间，请更改其中任何一个组件的弹性增长

有关如何使用flexbox的信息：

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

如何将输入字段和按钮并排完全填充一行？

1 个答案: