1

我正在嘗試使一個綠色div位於灰色中間的搜索欄(請參閱http://codepen.io/anon/pen/LRBEvq?editors=1100)以及複選框,選擇下拉菜單和輸入字段全部內聯有兩個按鈕 - 所以一切都在同一行。我正在使用Bootstrap使其響應,但卡住,無法弄清楚..謝謝你的所有幫助!在搜索欄中內嵌複選框和輸入字段

這裏是我的html:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 

<body> 
    <div class="container"> 
    <div class="main"> 
     <div class="formContainer"> 
     <div class="col-md-12">Lorem lorem lorem 
      <div class="pull-right">Ipsum lorem ipsum</div> 
     </div> 
     <div class="row mainContent"> 
      <!-- mainContent --> 
      <div class="col-md-7"> 
      <!-- main content --> 

      <div class="checkbox"> 
       <span class="choice-details"> 
             <label class="checkbox-inline"> 
              <input type="checkbox" value="" checked>Lorem 
              </label> 
              <label class="checkbox-inline"> 
              <input type="checkbox" value="">Ipsum 
             </label> 
            </span> 
      </div> 
      <div class="choice-select"> 
       <select class="form-control"> 
            <option value="one">One</option> 
            <option value="two">Two</option> 
            <option value="three">Three</option> 
            <option value="four">Four</option> 
            <option value="five">Five</option> 
           </select> 
      </div> 
      <div class="choice-input"> 
       <input type="text" placeholder="Placeholder text"> 
      </div> 


      </div> 
      <div class="col-md-5"> 
      <button>Lorem ipsum lorem</button> 
      <button>Lorem lorem lorem</button> 
      </div> 
      <!-- end main content --> 
     </div> 
     <!-- end mainContent --> 
     </div> 
    </div> 
    </div> 

這是我的CSS:

.main { 
    background-color: grey; 
    width: 1202px; 
    height: 156px; 
    margin: 0 auto; 
} 

.formContainer { 
    width: 1140px; 
    height: 85px; 
    background-color: green; 
} 

button { 
    height: 37px; 
    width: 160px; 
} 

.choice { 
    background-color: lightgrey; 
    height: 37px; 
} 

.checkbox { 
    width: 207px; 
    border: 1px solid white; 
} 

.choice-select { 
    width: 173px; 
} 

.choice-input { 
    width: 390px; 
} 

回答

0

您從引導需要的形式標記的類.form-inline。下面是一個例子:

<body> 
    <div class="container"> 
    <div class="main"> 
     <div class="formContainer"> 
     <div class="col-md-12">Lorem lorem lorem 
      <div class="pull-right">Ipsum lorem ipsum</div> 
     </div> 
     <div class="row mainContent"> 
      <!-- mainContent --> 
      <div class="col-md-7 form-inline"> 
      <!-- main content --> 

      <form class="form-inline"> 
       <div class="form-group"> 
        <label for="exampleInputName2">Name</label> 
        <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe"> 
       </div> 
       <div class="form-group"> 
        <label for="exampleInputEmail2">Email</label> 
        <input type="email" class="form-control" id="exampleInputEmail2" placeholder="[email protected]"> 
       </div> 
       <button type="submit" class="btn btn-default">Send invitation</button> 
      </form> 

      </div> 
      <div class="col-md-5"> 
      <button class="btn btn-primary">Lorem ipsum lorem</button> 
      <button class="btn btn-success">Lorem lorem lorem</button> 
      </div> 
      <!-- end main content --> 
     </div> 
     <!-- end mainContent --> 
     </div> 
    </div> 
    </div> 

如果你讓你的形式,一個單獨的分度.form-group類和所有它裏面.form-inline,這使得內嵌形式的每個輸入。

來源:Bootstrap Documentation

相關問題