Не удается получить содержимое в одной строке

Я пытаюсь поместить все элементы управления в одну строку без использования строки класса, потому что эти элементы управления находятся рядом со столбцом, который также имеет другие элементы управления. Так что моя структура на самом деле это:

<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

Как вы можете видеть кнопки на той же строке, но текстовое поле идти вперед, я не знаю, что неправильно. Кто-нибудь может помочь? Спасибо.

1 ответ

  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>