Question

我正在尝试将所有控件放在同一行而不使用类行'因为此控件靠近列，也有其他控件。所以我的结构实际上是这样的：

<div class="col-xs-12 col-md-4">
        <button class="btn btn-default">
            <span class="glyphicon glyphicon-plus"></span>
            Add</button>

        <button class="btn btn-default" >
            <span class="glyphicon glyphicon-plus"></span>
            Remove</button>

        <button class="btn btn-default">
            <span class="glyphicon glyphicon-repeat"></span>
            Refresh</button>

        <button class="btn btn-default">
            <span class="glyphicon glyphicon-fullscreen"></span>
        </button>

        <div class="input-group">
            <input type="text"
                   class="form-control"
                   placeholder="Hello world">
            <span class="input-group-btn">
                <button class="clear btn btn-default clean-resource btn-danger" type="button">
                    <span class="glyphicon glyphicon-remove"></span>
                </button>
            </span>
        </div>
  </div>

这是jsfiddle

如何看到按钮在同一行，但文本框继续，我不知道wham是错的。有人可以帮忙吗？感谢。

Answer 1

使用此类网格部分和http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp并根据此链接调整屏幕大小

 <div class="row">
     <div class="col-sm-4">
            <button class="btn btn-default">
                <span class="glyphicon glyphicon-plus"></span>
                Add</button>

            <button class="btn btn-default" >
                <span class="glyphicon glyphicon-plus"></span>
                Remove</button>

            <button class="btn btn-default">
                <span class="glyphicon glyphicon-repeat"></span>
                Refresh</button>

            <button class="btn btn-default">
                <span class="glyphicon glyphicon-fullscreen"></span>
            </button>
            </div>
            <div class="col-sm-4">
            <div class="input-group">
                <input type="text"
                       class="form-control"
                       placeholder="Hello world">
                <span class="input-group-btn">
                    <button class="clear btn btn-default clean-resource btn-danger" type="button">
                        <span class="glyphicon glyphicon-remove"></span>
                    </button>
                </span>
            </div>
        </div>
        </div>

无法在同一行上获取内容

1 个答案: