-1
我創建了此註冊表單，但是我無法將兩個div標籤放在一行中，只有在最小化窗口時纔會發生。有什麼建議麼？編號喜歡將Facebook和G +下的文本放置在文本旁邊以及兩個文本字段。將兩個標籤並排放置
<div class="col-md-offset-2 col-md-8 text-center">
<div class="container-fluid">
<div id="logo-signup">
<img class="img-responsive" src="uv.png">
</div> <!-- logo -->
<div class="signup-header">
<label class="uv-header">United Volunteers</label>
<label class="sm-title">Register Using Your Social Media Account</label>
<button type="submit" class="btn-facebook-signup">Register With Facebook</button>
<button type="submit" class="btn-gmail-signup">Register With Google+</button>
</div> <!-- login-form -->
</div> <!-- container-fluid -->
</div> <!-- col -->
<div class="col-md-offset-2 col-md-8 ">
<div class="container-fluid">
<div class="signup-form2">
<label class="signup-title"><span>Personal Information</span></label>
<div class="signup-labels">
<input type="text" class="form-input" placeholder="First Name" style="margin-right:10px">
<input type="text" class="form-input" placeholder="Last Name">
</div>
<label class="signup-title"><span>Address Information</span></label>
<label class="signup-title"><span>Skills</span></label>
<label class="signup-title"><span>Volunteering Area</span></label>
<label class="signup-title"><span>Account Information</span></label>
</div>
</div>
</div>
.signup-header {
top:90px;
position:relative;
box-sizing: border-box;
margin: 25px auto;
margin-bottom:0px;
width: 100%;
max-width:1000px;
overflow: hidden;
background-color: white;
padding: 25px 50px 50px 50px;
box-shadow: 1px 5px 2px #330000;
}
.signup-form2 {
top:90px;
position:relative;
box-sizing: border-box;
margin: 25px auto;
margin-bottom:0px;
width: 100%;
max-width:1000px;
background-color: white;
padding: 10px 50px 50px 50px;
box-shadow: 1px 5px 2px #330000;
z-index: 1;
}
.uv-header{
font-weight:bold;
font-size:35px;
font-family:Candara;
float:left;
padding-left:225px;
}
.sm-title {
float:left;
padding-left:225px;
margin-bottom: 5px;
font-weight: bold;
font-family:Candara;
font-size: 20px;
}
.sm-signup{
font-size:35px;
font-family:Candara;
float:left;
padding-left:225px;
}
#logo-signup {
top:70px;
left: 17%;
transform: translateX(-50%);
position:absolute;
background-color: white;
background-size: 170px auto;
background-repeat: no-repeat;
height: 170px;
width: 170px;
padding: 0px;
border: 5px solid white;
box-shadow: 1px 3px 2px grey;
z-index: 1;
}
h1 {
font-weight:bold;
font-size:35px;
font-family:Candara;
text-align: center;
margin: 100px auto 50px auto;
}
a {
text-decoration: none;
}
span{
background:#fff;
padding:0 10px;
}
.signup-title{
text-align:center;
margin-top:20px;
margin-bottom:20px;
width:100%;
border-bottom:1px solid #000;
line-height:0.1em;
}
.social_media {
text-align:center;
position:relative;
top:-75px;
}
.label {
display: block;
margin-bottom: 5px;
font-weight: bold;
font-family:Candara;
font-size: 20px;
}
.signup-labels{
float:left;
}
.btn-signup {
background-color: firebrick;
font-family:Candara;
font-size: 20px;
color: white;
padding: 10px;
border: 1px solid firebrick;
border-radius: 5px;
box-shadow: 2px 4px 4px #330000;
width: 200px;
margin:auto;
margin-top:200px;
display:block;
}
.btn-facebook-signup {
background-image: url(fb.gif);
background-color: #3b5998;
padding: 0px;
border: 3px solid white;
border-radius: 5px;
box-shadow: 1px 2px 2px grey;
margin: auto;
background-size: contain;
background-repeat: no-repeat;
height: 50px;
width: 250px;
padding-left:40px;
font-family: sans-serif;
font-size: 16px;
color: white;
}
.btn-gmail-signup {
background-image: url(g+.gif);
background-color: #dc4a38;
padding: 0px;
border: 3px solid white;
border-radius: 5px;
box-shadow: 1px 2px 2px grey;
margin: auto;
background-size: contain;
background-repeat: no-repeat;
height: 50px;
width: 250px;
padding-left:40px;
font-family: sans-serif;
font-size: 16px;
color: white;
}
.form-input {
width:80%;
height: 35px;
padding: 6px 12px;
font-size: 12px;
font-family: sans-serif;
vertical-align: middle;
border: 1px solid #ccc;
border-radius: 4px;
background-color: #f2f2f2;
line-height: 1.5;
}
.social_media-signup {
display:inline-block;
}
您能否提供您的問題以及您希望看到結果的問題。同時我可以建議你可以嵌套'row'和'col - * - 6'標籤來創建內聯元素。 – haxxxton