引導和html中的表單問題

Question

我有一些問題，我需要一些幫助。我正在學習新的東西，並試圖通過花時間學習一些技巧。

我想使這張圖片和形式看起來像圖片一樣。我張貼我的代碼 enter image description here

的index.html

<div class="jumbotron"> 
<div class="row"> 

    <div class="col-md-6 col-sm-6"> 
    <img class="img-responsive" src="img/lqvopodravnenasnimka.jpg" alt="smiley face"> 
    </div> <!--col-md-5--> 


    <div class="col-md-6 col-sm-6"> 
    <h3>Send Request</h3> 
     <p id="mainparagraph">Заповядайте в нашия нов хотел Grand Hotel Gergana. Ние Ви предлагаме отлични условия, където можете да прекарате своите ценни свободни дни.</p> 
     <form name="myForm" action="#" onsubmit="return validateForm()" method="post"> 
      <div class="row"> 
       <div class="col-md-6"> 
        <div class="form-group form-group-sm" style="margin-top:20px;"> 
         <label for="firstname" class="control-label">Name</label> <!--name--> 
         <br> 
         <input type="text" class="form-control" id="firstname" style="width:100%;" name="fname"> 
        </div><!-- form-group--> 
       </div><!--col-md-5--> 

       <div class="col-md-6"> 
        <div class="form-group form-group-sm" style="margin-top:20px;"> 
         <label for="surname" class="control-label">Surname</label> <!--surname --> 
         <br> 
         <input type="text" class="form-control" id="surname" style="width:100%;" name="sname"> 
        </div><!-- form-group--> 
       </div><!--col-md-5--> 
      </div><!--row--> 

      <div class="row"> 
       <div class="col-md-12"> 
        <div class="form-group form-group-sm" style="margin-top:20px;"> 
         <label for="email" class="control-label">Email</label> 
         <br> 
         <input type="text" class="form-control" id="email" style="width:100%;" name="mail"> 
        </div> 
       </div> 
      </div><!--row--> 

      <div class="row"> 
       <div class="col-sm-12"> 
        <div class="form-group form-group-sm" style="margin-top:20px;"> 
         <label for="phone" class="control-label">Mobile phone</label> 
         <!--<span class="glyphicon glyphicon-arrow-right"><p style="color:gray; font-style:italic; font-size:0.7em;">Sample: +352XXXXXXXXX</p> --> 
         <br> 
         <input type="phone" class="form-control" id="phone" style="width:100%;" name="mphone"> 
        </div> 
       </div> 
      </div><!--row--> 

      <div class="row"> 
       <div class="col-md-6"> 
        <div class="form-group form-group-sm" style="margin-top:20px;"> 
         <label for="date" class="control-label">Date of birth</label> 
         <br> 
         <input type="number" class="form-control" id="number" Placeholder="DD" style="width:55px;" name="day"> 
         <input type="number" class="form-control" id="number" Placeholder="MM" style="width:55px;" name="month"> 
         <input type="number" class="form-control" id="number" Placeholder="YYYY" style="width:90px;" name="year"> 
        </div> 
       </div><!--col-md-6--> 

       <div class="col-md-6"> 
        <div class="form-group form-group-sm" > 
         <label for="text" class="control-label" style="margin-top:20px;">Nationality</label> 
         <br> 
         <select class="options" name="cars" style="width:100%;"> 
          <option value="България">България</option> 
          <option value="Румъния">Румъния</option> 
          <option value="Гърция">Гърция</option> 
          <option value="Сърбия">Сърбия</option> 
         </select> 

        </div><!--form-group--> 
       </div> 

       <div class="col-md-12"> 
        <input type="submit" value="SAMPLE BUTTON"> 
       </div> 
      </div><!--row--> 



     </form> 
    </div><!--col-md-7--> 

Answer 1

它的一個非常簡單的修補程序。你真的很接近！首先使用Bootstrap，你需要有一個容器，所以這是一個將在你的主div上的類，它包含了所有的東西，所以對於這個實例它就是你的jumbotron div。

<div class="jumbotron container"> 

這將格式化90％的你正在努力實現在一個乾淨的盒子，所有的的cols協調工作與對方什麼。

至於輸入框，我看到你的日期輸入有困難。這也是一個簡單的修復。只需將下面的代碼添加到您的CSS：

#number { 
    float: left; 
} 

這將推動他們緊靠在一起，如您的圖片看到。這裏

工作的例子 - https://codepen.io/anon/pen/MoqRMK

我相信你是有經驗足以讓任何其他所需的更改。