使用Twitter的bootstrap和Rails4渲染列

Question

我正在使用Rails4構建原型。 我做了以下custom.css.scss ：

// System wide CSS

html {
    background-color: gray;
    margin: 5px;
    padding-left: 10px;
    padding-top: 2px;
  height: auto;
}

body {
    margin: 10px;
    border-radius: 15px;
    padding: 10px;
  height: auto;
}

img {
    align: left;
    border: 2px white;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

.profile_image {
    float: left;
    padding-right: 10px;
}

.col1of3,  .col2of3, .col3of3 {
  width: auto;
  float: left;
  margin: 5px;
}

我的問題是如何顯示列。 在這種情況下很好，因為我不使用columns ： 好的意見

但是在此頁面（我使用columns ，body元素似乎更短，而length元素卻更大：
_{（來源： screensteps.me ）}

我知道問題與觀點有關。 這是我的edit.html.erb ：

<h1>Προσθήκη Ασθενούς</h1>

<%= render 'form' %>

<%= link_to 'Πίσω', patients_path %>

這是我的_form.html.erb ：

<%= form_for(@patient) do |f| %>
  <% if @patient.errors.any? %>
    <div id="error_explanation">
      <h2>Σφάλμα κατά την διαδικασία αποθήκευσης: </h2>

      <ul>
      <% @patient.errors.full_messages.each do |msg| %>
    <li><%= msg %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

  <div class="col1of3">
    <div class="fieldset">
      <%= f.label "Όνομα" %><br>
      <%= f.text_field :name %>
    </div>
    <div class="fieldset">
      <%= f.label "Επώνυμο" %><br>
      <%= f.text_field :surname %>
    </div>
    <div class="fieldset">
      <%= f.label "Φύλο" %><br>
      <%= f.select :gender, options_for_select(list_genders)%>
    </div>
    <div class="fieldset">
      <%= f.label "Ημερομηνία Γεννήσεως" %><br>
      <%= f.date_select :birthday, :start_year => 1920, :use_month_names => ['Ιανούριος', 'Φεβρουάριος', 'Μάρτιος', 'Απρίλιο', 'Μάιος', 'Ιούνιος', 'Ιούλιος', 'Αύγουστος', 'Σεπτέμβριος', 'Οκτώβριος', 'Νοέμβριος','Δεκέμβριος'] %>
    </div>
    <div class="fieldset">
      <%= f.label "Εικόνα" %><br>
      <%= f.text_field :image_url %>
    </div>
    <div class="fieldset">
      <%= f.label "ΑΜΚΑ" %><br>
      <%= f.text_field :social_security_number %>
    </div>
  </div>
  <div class="col2of3">
    <div class="fieldset">
      <%= f.label "Οργανισμός Ασφάλισης" %><br>
      <%= f.select :social_security_institution, options_for_select(list_greek_sso) %>
    </div>
    <div class="fieldset">
      <%= f.label "Αρ Οργαν Ασφάλισης" %><br>
      <%= f.text_field :social_security_institution_number %>
    </div>
    <div class="fieldset">
      <%= f.label "ΑΦΜ" %><br>
      <%= f.text_field :afm %>
    </div>
    <div class="fieldset">
      <%= f.label "Τηλ οικίας" %><br>
      <%= f.text_field :home_phone %>
    </div>
    <div class="fieldset">
      <%= f.label "Τηλ εργασίας" %><br>
      <%= f.text_field :work_phone %>
    </div>
    <div class="fieldset">
      <%= f.label "Κινητό" %><br>
      <%= f.text_field :mobile_phone %>
    </div>
    <div class="fieldset">
      <%= f.label "Πατρώνυμο (του)" %><br>
      <%= f.text_field :father_name %>
    </div>
  </div>
  <div class="col3of3">
    <div class="fieldset">
      <%= f.label "Διεύθυνση Οικίας" %><br>
      <%= f.text_field :home_address %>
    </div>
    <div class="fieldset">
      <%= f.label "Πόλη" %><br>
      <%= f.text_field :city %>
    </div>
    <div class="fieldset">
      <%= f.label "Χώρα" %><br>
      <%= f.text_field :country, :value => 'Ελλάδα' %>
    </div>
    <div class="fieldset">
      <%= f.label "Ταχυδρομικός Κώδικας" %><br>
      <%= f.text_field :postal_code %>
    </div>
    <div class="fieldset">
      <%= f.label :email %><br>
      <%= f.text_field :email %>
    </div>
    <div class="fieldset">
      <%= f.label "Σημειώσεις" %><br>
      <%= f.text_area :notes, cols: "50", rows: "8" %>
    </div>
    <div class="actions">
      <%= f.submit "Υποβολή" %>
    </div>
  </div>
<% end %>

知道為什么列元素在<body>標記之外時會如何工作嗎？

謝謝

Answer 1

我認為是因為float屬性。 在_form.html.erb的最后，考慮在<% end %>之前插入以下內容-

<div style="clear: both;"/>

這樣可以清除嗎？

使用Twitter的bootstrap和Rails4渲染列

問題描述

1 個解決方案

解決方案1
1 已采納 2014-05-06 21:30:37

使用Twitter的bootstrap和Rails4渲染列

問題描述

1 個解決方案

解決方案1 1 已采納 2014-05-06 21:30:37

解決方案1
1 已采納 2014-05-06 21:30:37