引导和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

我相信你是有经验足以让任何其他所需的更改。