與引導

-1

形式實現我想有設計像下面的圖片形式：與引導

我試着用下面的代碼：

<form> 

      <div class="form-group form-inline"> 
      <label for="exampleInputPassword1">Navn:</label> 
      <input type="text" class="form-control" id="exampleInputPassword1" placeholder="" data-required="true" name="navn"> 
      </div> 

      <div class="form-group form-inline"> 
      <label for="exampleInputPassword1">Bedrift:</label> 
      <input type="text" class="form-control" id="exampleInputPassword1" placeholder="" data-required="true" name="bedrift"> 
      </div> 


      <div class="form-group form-inline"> 
      <label for="exampleInputPassword1" class>Tlf:</label> 
      <input type="text" class="form-control" id="exampleInputPassword1" placeholder="" data-required="true" name="tlf"> 
      </div> 

      <div class="form-group form-inline"> 
      <label for="exampleInputEmail1">Mailadresse:</label> 
      <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="" data-required="true" name="mailadresse"> 
      </div> 

      <input id="input-region" type="hidden" name="region" value=""> 
      <button type="submit" class="btn btn-primary">Send</button> 
     </form>

但結果不是我所期待。

我把標籤和輸入放在一個白色的盒子上，而不使用標籤作爲佔位符。

來源

2016-11-16 Kerby82

爲什麼結果不符合您的預期？ – Nathan

Bootstrap沒有任何組件可以自己做你想做的事情。你需要重寫CSS和/或用你自己的代碼修改HTML。可能應該給'form-group'一個白色的背景並刪除'form-control'元素的邊框。 –

你想使用佔位符功能，我猜？

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<form> 
 

 
      <div class="form-group form-inline"> 
 
      <label for="exampleInputPassword1" class="sr-only">Navn:</label> 
 
      <input type="text" class="form-control" id="exampleInputPassword1" placeholder="Navn:" data-required="true" name="navn"> 
 
      </div> 
 

 
      <div class="form-group form-inline"> 
 
      <label for="exampleInputPassword1" class="sr-only">Bedrift:</label> 
 
      <input type="text" class="form-control" id="exampleInputPassword1" placeholder="Bedrift:" data-required="true" name="bedrift"> 
 
      </div> 
 

 

 
      <div class="form-group form-inline"> 
 
      <label for="exampleInputPassword1" class="sr-only"></label> 
 
      <input type="text" class="form-control" id="exampleInputPassword1" placeholder="Tlf:" data-required="true" name="tlf"> 
 
      </div> 
 

 
      <div class="form-group form-inline"> 
 
      <label for="exampleInputEmail1" class="sr-only"></label> 
 
      <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Mailadresse:" data-required="true" name="mailadresse"> 
 
      </div> 
 

 
      <input id="input-region" type="hidden" name="region" value=""> 
 
      <button type="submit" class="btn btn-primary">Send</button> 
 
     </form>

來源

2016-11-16 20:02:05 dahrens

您可以使用佔位功能

檢查這個片段

body { 
 
    background: blue; 
 
} 
 
input { 
 
    margin: 5px; 
 
    margin-left: 20px; 
 
} 
 
form { 
 
    display: flex; 
 
    flex-direction: column; 
 
    width: 500px; 
 
} 
 
button { 
 
    align-self:center; 
 
    width:100px; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<form> 
 

 
    <div class="form-group form-inline"> 
 

 
    <input type="text" class="form-control" id="exampleInputPassword1" placeholder="Navn:" data-required="true" name="navn"> 
 
    </div> 
 

 
    <div class="form-group form-inline"> 
 

 
    <input type="text" class="form-control" id="exampleInputPassword1" placeholder="Bedrift:" data-required="true" name="bedrift"> 
 
    </div> 
 

 

 
    <div class="form-group form-inline"> 
 
    <input type="text" class="form-control" id="exampleInputPassword1" placeholder="Tlf:" data-required="true" name="tlf"> 
 
    </div> 
 

 
    <div class="form-group form-inline"> 
 

 
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Mailadresse" data-required="true" name="mailadresse"> 
 
    </div> 
 

 
    <input id="input-region" type="hidden" name="region" value=""> 
 
    <button type="submit" class="btn btn-primary">Send</button> 
 
</form>

希望這有助於

來源

2016-11-16 20:05:45 Geeky

回答

相關問題