Простая форма и бутстреп несовместимые css - PullRequest
Новая
       31

Простая форма и бутстреп несовместимые css

0 голосов
/ 11 января 2019

Я пытаюсь скопировать этот простой дизайн в режим редактирования.

enter image description here

Вот код, отображающий изображение выше: 

<div class="user-description-container col-md-6 col-md-offset-3">
  <div class="col-md-3">
    <%= image_tag @user.image.standard.url, class: "user-picture img-circle" %>
  </div>
  <div class="user-description-box col-md-7">
    <div class="user-name"><%= @user.full_name %></div>
    <div class="user-stats">
      <div class="user-stats-debates inline-flex"><b class="spacing-margin-right">
        <%= @user.groups.length %></b><% if @user.groups.length == 0 %>
        <p> débat</p><% else %><p> débats</p>
      </div>

      <% end %>
      <div class="user-stats-followers inline-flex"><b class="spacing-margin-right"><%= @user.followers.length %></b> <%if @user.followers.length == 0%>
        <p> disciple</p> <% else %><p> disciples</p>
        <% end %>
      </div>
    </div>
    <div class="user-description">
      <%= @user.description %>
    </div>
  </div>
  <div class="col-md-2 edit-profile">
    <% if current_user == @user %>
      <%= link_to(edit_user_path(@user),:class =>"edit-button") do %>
        <i class="glyphicon glyphicon-pencil"></i>
      <% end %>
    <% end %>
  </div>
</div>

Я скопировал основной дизайн страницы в режим редактирования. К сожалению, вот что я получаю: enter image description here

Я использую простой камень формы с рельсами, и я не могу заставить загрузчик работать должным образом. Вот мой код в режиме редактирования: 

    <div class="container">
  <div class="row">
    <div class="user-description-container col-md-6 col-md-offset-3">
      <%= form_for @user do |form| %>
        <div class="user-upload-preview col-md-3">
          <%= image_tag @user.image.standard.url, class: "user-picture img-circle object-fit-covered" %>
          <div class="form-input">
            <label class="btn btn-sm btn-primary image-browse-button" >
              Choisir une photo
              <span style="display:none;">
                <%= form.file_field :image %>
              </span>
            </label>
          </div>
        </div>
        <div class="user-description-box col-md-7">
          <div class="user-name">
            <%= @user.full_name %>
          </div>

          <div class="user-stats">
          <div class="user-stats-debates inline-flex"><b class="spacing-margin-right">
            <%= @user.groups.length %></b><% if @user.groups.length == 0 %>
            <p> débat</p><% else %><p> débats</p>
          </div>

          <% end %>
          <div class="user-stats-followers inline-flex"><b class="spacing-margin-right"><%= @user.followers.length %></b> <%if @user.followers.length == 0%>
            <p> disciple</p> <% else %><p> disciples</p>
            <% end %>
          </div>
          <div class="form-input inline-flex">
            <%= form.text_field :description, placeholder: "Description", class: "form-control" %>
          </div>
          <div class="form-input save-edit">
            <%= form.submit "Sauvegarder", class: "form-control profile-submit-button" %>
          </div>
          <% end %>
        <div class="col-md-2">
        </div>
        </div>
    </div>
  </div>
</div>

Любой ответ был бы очень признателен.

1 Ответ

0 голосов
/ 11 января 2019

Таким образом, с точки зрения того, как вы используете начальную загрузку, вы должны ввести все элементы, которые вы хотите, в строке, которую вы сделали, но все это col-md- должно составить в общей сложности 12, чтобы это было у полной строки у вас есть col-md-7, которую вы должны добавить с помощью col-xs, чтобы заполнить ее, а также с точки зрения того, как сделать так, я думаю, этого должно быть достаточно

вот такой макет, который выглядит как то, что вы пытаетесь сделать 

      <div class="container">
            <div class="row">
              <div class="col-md-4">
                IMAGE
              </div>
              <div class="col-md-8">
                <div class="header">
                  <h1 class="page-header text-center">MY NAME</h1>
                </div>
                <div class="row">
                  <div class="col-md-6">
                    <h3 class="text-center">insert contents here</h3>
                    <center>
                      <div class="center">
                        <button class="btn btn-primary">BTN</button>
                      </div>
                    </center>
                  </div>
                  <div class="col-md-6">
                    <h3 class="text-center">insert contents here</h3>
                    <center>
                        <div class="center">
                          <button class="btn btn-primary">BTN</button>
                        </div>
                    </center>
                  </div>
                </div>
              </div>
            </div>
          </div>

Похоже, что вы вводите пользовательскую информацию, держитесь подальше от тегов @user, а такие данные, как .file, и другие подобные вещи используют теги и устанавливают их с идентификатором, а затем убедитесь, что для управления ими используется javascript

...