Question

我正在使用bootstrap来尝试创建表单。部分表格涉及输入社交媒体链接（FB，Linkedin和Twitter）。我希望所有这些输入都在一行内 - 我该怎么做？提前致谢。

<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>

Answer 1

您可以简单地将这三个输入放在一行中，并将col - * - 4应用于每一行。

请参阅工作示例摘录。

＆＃13;

body {
  padding-top: 50px;
}
#upload_culprit_photo {
  margin-bottom: 20px;
}

＆＃13;

<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>

＆＃13;

Answer 2

我找到了一种解决方法，你实际上可以这样做：

<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 -->

编辑：抱歉，看起来我想念原来的问题。所以@Manuel Choucino的回答似乎是好的。

Answer 3

只需使用左浮动。

.class{float:left;}

如果我理解了你想要的东西：

http://jsfiddle.net/qn4mxqrq/4/

这是您的代码的编辑版本。

Answer 4

当我查看您的代码时，有一个类名称可以控制所有组。形式的基团。

你的CSS中的

只需为该socialForm创建规则。

.socialForm{
  float: left;
}

Answer 5

这里添加引导类，如col-lg，col-md，col-sm，col-xs，每个类都可以使用不同的设备。例如：col-lg它的工作原理是大尺寸桌面（1920 * 1080分辨率），col- md适用于中型桌面（1366 * 768分辨率），col-sm适用于平板电脑，而col-x适用于手机

希望我的回答适用于所有设备。

＆＃13;

body {
  padding-top: 50px;
}
#upload_culprit_photo {
  margin-bottom: 20px;
}

＆＃13;

<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>

＆＃13;

如何在同一行上有3个输入

5 个答案: