Bootstrap CSS смещения

Question

Итак, я скачал bootstrap и получил следующий фрагмент кода.

<header id="top">
        <div class="container">
            <div class="row">
                <div class="col-sm-3 ">
                    <image alt="here will be the logo" src=""></image>
                </div>
                <div  class="col-sm-6 ">

                </div>
                <div class="col-sm-3">
                    <form class="form-horizontal" >
                    <div class="form-group row">
                    <label class="control-label col-sm-4" for="document">Document:</label>
                    <div class="col-sm-8">
                      <input type="email" class="form-control" id="document" placeholder="document">
                    </div>
                    </div>
                    <div class="form-group row">
                    <label class="control-label col-sm-4" for="revision">Revision:</label>
                    <div class="col-sm-8">
                      <input class="form-control" id="revision" placeholder="revision">
                    </div>
                    </div>
                    <div class="form-group row">
                    <label class="control-label col-sm-4" for="pagenr">Page nr:</label>
                    <div class="col-sm-8">
                      <input class="form-control" readonly = "true" id="pagenr" placeholder="here will be page number">
                    </div>
                    </div>
                    <div class="form-group row">
                    <label class="control-label col-sm-4" for="iso">ISO:</label>
                    <div class="col-sm-8">
                      <input class="form-control" id="iso" placeholder="iso">
                    </div>
                    </div>
                    </form>

Вот результат, который я получаю: веб-страница Теперь меня интересует 1. выравнивание текста внутри форм (по какой-то причине метка расположена выше, чем ввод) и 2. огромный правый край, который не убирает все, что я пытаюсь сделать, и не поглощает пространство ввода. Интересно также отметить, что создание поля ввода «только для чтения» делает его постоянно серым. Вот мой css код:

input.form-control{
    width: 80%;
    padding: 15px 22px;
    margin: 5px 5px;
    box-sizing: border-box;  
    font-size: 14px;
    height: 10px;
    border:0;
    background-color: #FFEBCD;
}
header {
    padding-top: 20px;  
    height: 100px;
    font-size: 14px;
}
div.container
{
    margin-right: 1px;
    margin-left: 100px;
    padding-right: 1px;
    border-right: 1px;
}
div.form-group
{
    margin-right: 1px;
    padding-right: 1px;
    border-right: 1px;
}
form.form-horizontal
{
    margin-right: 1px;
    padding-right: 1px;
    border-right: 1px;
    vertical-align: bottom;
}
div.row
{
    margin-right: 1px;
    padding-right: 1px;
    border-right: 1px;
}
label.control-label
{
    width: 100%;
    vertical-align: baseline ;
    background-color: CadetBlue;
    text-align: left;
}

Так что ни один из атрибутов вертикального или текстового выравнивания не работает и не устанавливает 'right margin' = 1px для любого элемента, который я могу придумать. Код Html, который я предоставил, охватывает только первую форму, поскольку весь код будет в два раза больше, и проблема, очевидно, та же, что и со второй формой.

Answer 1

Хорошо, поэтому я исправил смещение текста, перетаскивая высоту строки обоих элементов формы, пока они не выглядели достаточно хорошо. Когда вы раскрашиваете коробки, вы все равно видите смещение. И правое поле было таким большим, потому что левое было слишком маленьким, если это имеет смысл

Answer 2

Я редактировал их код. Я надеюсь, что это так, как вы хотели. Это действительно сложно написал.

  <header id="top">
    <div class="container">
      <div class="row">
        <div class="col-sm-4 ">
          <image alt="here will be the logo" src=""></image>
        </div>
        <!-- <div class="col-sm-6 ">

        </div> -->
        <div class="col-sm-8">
          <form>
            <div class="form-group row">
              <label class="col-form-label col-sm-2" for="document">Document:</label>
              <div class="col-sm-10">
                <input type="email" class="form-control " id="document" placeholder="document">
              </div>
            </div>
            <div class="form-group row">
              <label class="control-label col-sm-2" for="revision">Revision:</label>
              <div class="col-sm-10">
                <input class="form-control" id="revision" placeholder="revision">
              </div>
            </div>
            <div class="form-group row">
              <label class="control-label col-sm-2" for="pagenr">age nr:</label>
              <div class="col-sm-10">
                <input class="form-control" id="pagenr" placeholder="here will be page number">
              </div>
            </div>
            <div class="form-group row">
              <label class="control-label col-sm-2" for="iso">ISO:</label>
              <div class="col-sm-10">
                <input class="form-control" id="iso" placeholder="iso">
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
    </div>
  </header>