0
我會在左邊的形式，但我獲得了右邊的表格： 
的CSS引導形式的Rails 3.2
我真的不知道是什麼問題。可能有些Css與bootstrap形成鮮明對比。我將有text-field分離（我獲得的一切合並） 這是我的表單的CSS：
<div class="container">
<div class="row">
<div class="col-sm-12">
<legend>Mr. Sosa:</legend>
</div>
<!-- panel preview -->
<div class="col-sm-5">
<h4>Add payment:</h4>
<div class="panel panel-default">
<div class="panel-body form-horizontal payment-form">
<div class="form-group">
<label for="concept" class="col-sm-3 control-label">Concept</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="concept" name="concept">
</div>
</div>
<div class="form-group">
<label for="description" class="col-sm-3 control-label">Description</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="description" name="description">
</div>
</div>
<div class="form-group">
<label for="amount" class="col-sm-3 control-label">Amount</label>
<div class="col-sm-9">
<input type="number" class="form-control" id="amount" name="amount">
</div>
</div>
<div class="form-group">
<label for="status" class="col-sm-3 control-label">Status</label>
<div class="col-sm-9">
<select class="form-control" id="status" name="status">
<option>Paid</option>
<option>Unpaid</option>
</select>
</div>
</div>
<div class="form-group">
<label for="date" class="col-sm-3 control-label">Date</label>
<div class="col-sm-9">
<input type="date" class="form-control" id="date" name="date">
</div>
</div>
</div>
</div>
</div>
你有什麼想法？謝謝
application.css.scss
#banner {
background: #9c9;
padding: 10px;
border-bottom: 2px solid;
font: small-caps 40px/40px "Times New Roman", serif;
color: #282;
text-align: center;
img {
float: left;
}
}
#notice {
color: #000 !important;
border: 2px solid red;
padding: 1em;
margin-bottom: 2em;
background-color: #f0f0f0;
font: bold smaller sans-serif;
}
#columns {
background: #141;
#main {
margin-left: 17em;
padding: 4em;
background: white;
}
#side {
float: left;
padding: 1em 2em;
width: 13em;
background: #141;
ul {
padding: 0;
li {
list-style: none;
a {
color: #bfb;
font-size: small;
}
}
}
}
}
bootstrap_and_overrides.css
/*
=require twitter-bootstrap-static/bootstrap
Use Font Awesome icons (default)
To use Glyphicons sprites instead of Font Awesome, replace with "require twitter-bootstrap-static/sprites"
=require twitter-bootstrap-static/fontawesome
*/
sign_in.css
body, html {
height: 100%;
background-repeat: no-repeat;
}
h2 {
font: small-caps 40px/40px "Times New Roman",serif;
text-align: center
}
.card-container.card {
margin-left: 310px;
max-width: 370px;
padding: 40px 40px;
}
.card {
background-color: #F7F7F7;
/* just in case there no content*/
padding: 20px 25px 30px;
margin: 0 auto 25px;
margin-top: 50px;
/* shadows and rounded borders */
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
-moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
}
.btn {
font-weight: 600;
height: 36px;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
cursor: default;
}
.profile-img-card {
width: 96px;
height: 96px;
margin: 0 auto 10px;
display: block;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
你發佈的HTML，你還可以發佈你添加到它的CSS？ – krishna
當然。我發佈了它 – Vito
這個CSS不影響你的表單樣式。你可以在其他地方定義更多的樣式，或者編輯引導CSS文件。我爲你創建了一個小提琴，它與左側對齊，請參閱http://jsfiddle.net/nss0vcLj/ – krishna