Bootstrap块不适合

Question

我制作了运费计算器，所有单个添加的产品都包含.alert .alert-warning 但是这个块宽度大于表单组（黄色博客宽度大于输入和绿色按钮）。我不明白为什么。

    <div class="container">
    <div class="row">
        <div class="col-md-12">

              <!-- Main jumbotron for a primary marketing message or call to action -->
  <div class="jumbotron">


  </div>

        <div class="some-text col-md-4  jumbotron">
        <h2>Как сделать заказ?</h2>
        <ul>

        </ul>
        </div>
                <div class="mainBlock col-md-7 col-md-offset-1 jumbotron">
                    <form id='additem' role="form" class="form-inline">
                        <div class="form-group">
                            <input type='text' class='simpleField form-control' placeholder="Введите артикул" id='addField'>
                            <span class='addButton simplButton btn btn-success'>Добавить</span>
                        </div>
                    </form>

                    <div class='addedItem'>
                </div>

                    <div class='controlButton'>
                        <span class='calcButton simplButton btn btn-success'>Рассчитать</span><span class='resetButton simplButton btn btn-danger'>Сбросить</span>
                </div>
            </div>
        </div>
    </div>
</div>

        $('.addedItem').append('<div class="oneItem  alert alert-warning" data-atr="'+val+'" data-cost="'+itemCost+'"><div class="oneItemInfo"><span class="oneItemName">'+itemName+'.</span> <span class="oneItemDescr">'+itemDescription+'</span><br/>Цена: <span class="oneItemCost">'+itemCost+'</span>р.</div><div class="deleteButtonBlock"><span class="simplButton btn btn-danger">Удалить</span></div></div>');
        $('.preloader').css('display','none');

或者您可以在现实生活中看到代码http://angevar.com/ikea/ - 在输入中添加此702.495.49。