Question

我正在尝试将此简单设计复制到编辑模式。

下面是显示上图的代码：

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

我将页面的主要设计复制到了编辑模式。不幸的是，这是我得到的：

我使用的是带有导轨的简单形式的gem，但引导程序无法正常工作。这是我在编辑模式下的代码：

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

任何答案将不胜感激。

Answer 1

因此，就您使用引导程序的方式而言，您应该连续输入想要的所有项目，但是所有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>以使其完整，例如如何使其成为完整行，我认为这足够了

这是一些布局，看起来像您要尝试的

constructor(){
    super();
    
    this.state = {
        selectedOption: "medium_term"
    }
  }
  
  handleOptionChange = changeEvent => {
       
        this.setState({
            selectedOption: changeEvent.target.value

        });
        this.getTop10();
        
        console.log(this.state.selectedOption); //shows previous button
    };
    
    render() {
    return (
      <div className="App">          
          <RadioButtons onChange={this.handleOptionChange} selectedOption={this.state.selectedOption}/>
      </div>
    );
  }
}

您似乎输入的用户信息远离@user标签，而.file等信息则使用标签并为其设置ID，然后确保使用javascript来进行操作

简单形式和引导程序不兼容的CSS

1 个答案: