1. 首頁
  2. 問答
  3. 如何在同一行上有3個輸入

如何在同一行上有3個輸入

2015-12-02 30 views
1

我在嘗試創建表單時使用了引導程序。部分形式涉及輸入社交媒體鏈接（FB，LinkedIn & Twitter）。我希望所有這些投入都在一行之內 - 我該如何做到這一點？提前致謝。如何在同一行上有3個輸入

http://jsfiddle.net/qn4mxqrq/1/

<HTML> 
<div class="form-group col-xs-12 col-sm-6 col-md-6 col-lg-2" id="upload_photo"> 

    <input type="image" src="img/square_face.png" alt="Submit" > 

    <br> 
    <br> 

</div> 

<div class="form-group col-xs-12 col-sm-6 col-md-6 col-lg-6" id="upload_basic_info"> 

    <div class="form-group"> 
    <label for="firstname">Name</label> 
    <input type="text" class="form-control input" maxlength="50" data-error="Please fill out this field." name="name" id="name" placeholder="Name" required> 
    <div class="help-block with-errors"></div> 
    </div> 

    <div class="form-group"> 
    <label for="lastname">Their Email Address </label> 
    <input type="text" class="form-control input" maxlength="50" data-error="Please fill out this field." name="email" id="email" placeholder="Their Email Address" required> 
    <div class="help-block with-errors"></div> 
    </div> 

    <div class="form-group"> 
    <label for="country">Their Country</label> 
    <select class="form-control input" data-error="Please fill out this field." name="country" id="country" required onchange="App.populate_option('Get_States', 'state', true, true, 'Create', $(this).val());"> 
     <option value="" disabled selected="selected">Their Country</option> 
      </select> 
    <div class="help-block with-errors"></div> 
    </div> 

    <div class="form-group"> 
    <label for="country">Their State/Region</label> 
    <select class="form-control input" data-error="Please fill out this field." name="state" id="state" required disabled="disabled"> 
     <option value="" disabled selected="selected">Their State/Region</option> 
    </select> 
    <div class="help-block with-errors"></div> 
    </div> 


</div> 

<div class="form-group col-xs-12" id="upload_socialmedia"><!--Start Social Media inputs --> 

    <div class="form-group"><!--Start Facebook Input --> 
    <label class="col-lg-2 control-label" name="facebook"></label> 
    <div class="col-lg-10"> 
     <input id="upload_fb" name="facebook" id="facebook" placeholder="Facebook URL" type="url"> 
    </div> 
    </div><!--End Facebook Input --> 

    <div class="form-group"><!--Start Linkedin Input --> 
    <label class="col-lg-2 control-label" name="linkedin"></label> 
    <div class="col-lg-10"> 
     <input id="upload_linkedin" name="linkedin" id="linkedin" placeholder="Linkedin URL" type="url"> 
    </div> 
    </div><!--End Linkedin Input --> 

    <div class="form-group"><!--Start Twitter Input --> 
    <label class="col-lg-2 control-label" name="twitter"><img src=></label> 
    <div class="col-lg-10"> 
     <input id="upload_twitter" name="twitter" id="twitter" placeholder="Twitter URL" type="url"> 
     </div> 
    </div><!--End Twitter Input --> 

</div> <!--End Social Media inputs --> 

<CSS> 
.container_upload{ 
width:1000px; 
margin-left:60px; 

} 

#upload_photo{ 
height:150px; 
width:300px; 
} 

.help-block { 
display: block; 
margin-top: 5px; 
margin-bottom: 10px; 
color: #737373 
} 

#upload_basic_info{ 
height:275px; 
} 

#upload_fb{ 
background: url(img/fb.png) no-repeat scroll 7px 7px; 
padding-left:30px; 
} 
</CSS>

來源

2015-12-02 Lauren

+0

你嘗試過在你的CSS使用浮動？例如：'float：left;' – NendoTaka

回答

1

我找到了一個解決辦法，你其實可以做這樣的：

<div class="form-group col-xs-12" id="upload_socialmedia"><!--Start Social Media inputs --> 
     <!-- EDIT THIS CLASS (and the two others) --> 
     <div class="form-group col-xs-4"><!--Start Facebook Input --> 
     <label class="col-lg-2 control-label" name="facebook"></label> 
     <div class="col-lg-10"> 
      <input id="upload_fb" name="facebook" id="facebook" placeholder="Facebook URL" type="url"> 
     </div> 
     </div><!--End Facebook Input --> 

     <div class="form-group col-xs-4"><!--Start Linkedin Input --> 
     <label class="col-lg-2 control-label" name="linkedin"></label> 
     <div class="col-lg-10"> 
      <input id="upload_linkedin" name="linkedin" id="linkedin" placeholder="Linkedin URL" type="url"> 
     </div> 
     </div><!--End Linkedin Input --> 

     <div class="form-group col-xs-4"><!--Start Twitter Input --> 
     <label class="col-lg-2 control-label" name="twitter"><img src=""></label> 
     <div class="col-lg-10"> 
      <input id="upload_twitter" name="twitter" id="twitter" placeholder="Twitter URL" type="url"> 
      </div> 
     </div><!--End Twitter Input --> 

    </div> <!--End Social Media inputs -->

編輯：對不起，它看起來像我missread原來的問題。所以@Manuel Choucino的回答似乎是很好的答案。

來源

2015-12-02 19:35:23 jkoestinger

+0

沒有你的更正確的，OP是使用bootstrap，所以向左移動應該是最後的手段，'col - * - 4'是要走的路。 –

+0

非常有用 - 謝謝！ – Lauren

0

當我看你的代碼時，有一個類名稱可以控制所有的組。形式的基團。

在你的CSS剛剛創建爲socialForm規則。

.socialForm{ 
    float: left; 
}

來源

2015-12-02 19:40:49

3

您可以簡單地將這三個輸入放在一行中並將col - * - 4應用於每個輸入。

查看工作示例代碼段。

body { 
 
    padding-top: 50px; 
 
} 
 
#upload_culprit_photo { 
 
    margin-bottom: 20px; 
 
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-12 col-sm-6"> 
 
     <input type="image" src="http://placehold.it/300x150" class="img-responsive center-block" id="upload_culprit_photo" /> 
 
    </div> 
 
    <div class="col-xs-12 col-sm-6" id="upload_basic_info"> 
 
     <div class="form-group"> 
 
     <label for="firstname">Name</label> 
 
     <input type="text" class="form-control" maxlength="50" data-error="Please fill out this field." name="name" id="name" placeholder="Name" required> 
 
     <div class="help-block with-errors"></div> 
 
     </div> 
 

 
     <div class="form-group"> 
 
     <label for="lastname">Their Email Address</label> 
 
     <input type="text" class="form-control" maxlength="50" data-error="Please fill out this field." name="email" id="email" placeholder="Their Email Address" required> 
 
     <div class="help-block with-errors"></div> 
 
     </div> 
 

 
     <div class="form-group"> 
 
     <label for="country">Their Country</label> 
 
     <select class="form-control" data-error="Please fill out this field." name="country" id="country" required onchange="App.populate_option('Get_States', 'state', true, true, 'Create', $(this).val());"> 
 
      <option value="" disabled selected="selected">Their Country</option> 
 
     </select> 
 
     <div class="help-block with-errors"></div> 
 
     </div> 
 
     <div class="form-group"> 
 
     <label for="country">Their State/Region</label> 
 
     <select class="form-control" data-error="Please fill out this field." name="state" id="state" required disabled="disabled"> 
 
      <option value="" disabled selected="selected">Their State/Region</option> 
 
     </select> 
 
     <div class="help-block with-errors"></div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-sm-4"> 
 
     <div class="form-group"> 
 
     <label name="facebook">Facebook</label> 
 
     <input id="upload_fb" class="form-control" name="facebook" id="facebook" placeholder="Facebook URL" type="url"> 
 
     </div> 
 
    </div> 
 
    <div class="col-sm-4"> 
 
     <div class="form-group"> 
 
     <label name="linkedin">LinkedIn</label> 
 
     <input id="upload_linkedin" class="form-control" name="linkedin" id="linkedin" placeholder="Linkedin URL" type="url"> 
 
     </div> 
 
    </div> 
 
    <div class="col-sm-4"> 
 
     <div class="form-group"> 
 
     <label name="twitter">Twitter</label> 
 
     <input id="upload_twitter" class="form-control" name="twitter" id="twitter" placeholder="Twitter URL" type="url"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

來源

2015-12-02 19:49:28 vanburen

0

這裏添加自舉類像COL-LG，COL-MD，COL-SM，COL-XS每個班級將工作不同devices.example：COL-LG及其作品大尺寸的桌面（1920×1080分辨率），COL-MD中等尺寸的桌面工作（1366×768分辨率） ，COL-SM工作在平板電腦和COL-XS作品在手機

希望我的回答將工作在所有設備中。

body { 
 
    padding-top: 50px; 
 
} 
 
#upload_culprit_photo { 
 
    margin-bottom: 20px; 
 
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 "> 
 
     <input type="image" src="http://placehold.it/300x150" class="img-responsive center-block" id="upload_culprit_photo" /> 
 
    </div> 
 
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 " id="upload_basic_info"> 
 
     <div class="form-group"> 
 
     <label for="firstname">Name</label> 
 
     <input type="text" class="form-control" maxlength="50" data-error="Please fill out this field." name="name" id="name" placeholder="Name" required> 
 
     <div class="help-block with-errors"></div> 
 
     </div> 
 

 
     <div class="form-group"> 
 
     <label for="lastname">Their Email Address</label> 
 
     <input type="text" class="form-control" maxlength="50" data-error="Please fill out this field." name="email" id="email" placeholder="Their Email Address" required> 
 
     <div class="help-block with-errors"></div> 
 
     </div> 
 

 
     <div class="form-group"> 
 
     <label for="country">Their Country</label> 
 
     <select class="form-control" data-error="Please fill out this field." name="country" id="country" required onchange="App.populate_option('Get_States', 'state', true, true, 'Create', $(this).val());"> 
 
      <option value="" disabled selected="selected">Their Country</option> 
 
     </select> 
 
     <div class="help-block with-errors"></div> 
 
     </div> 
 
     <div class="form-group"> 
 
     <label for="country">Their State/Region</label> 
 
     <select class="form-control" data-error="Please fill out this field." name="state" id="state" required disabled="disabled"> 
 
      <option value="" disabled selected="selected">Their State/Region</option> 
 
     </select> 
 
     <div class="help-block with-errors"></div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4"> 
 
     <div class="form-group"> 
 
     <label name="facebook">Facebook</label> 
 
     <input id="upload_fb" class="form-control" name="facebook" id="facebook" placeholder="Facebook URL" type="url"> 
 
     </div> 
 
    </div> 
 
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4"> 
 
     <div class="form-group"> 
 
     <label name="linkedin">LinkedIn</label> 
 
     <input id="upload_linkedin" class="form-control" name="linkedin" id="linkedin" placeholder="Linkedin URL" type="url"> 
 
     </div> 
 
    </div> 
 
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4"> 
 
     <div class="form-group"> 
 
     <label name="twitter">Twitter</label> 
 
     <input id="upload_twitter" class="form-control" name="twitter" id="twitter" placeholder="Twitter URL" type="url"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

來源

2015-12-03 06:45:15

相關問題

 相關問題