Я применил сетку в модале начальной загрузки, но она не разделяется при 50: 50
- Обе стороны должны быть заполнены
, но
- Это неправильно делить на цв?
- Как это исправить, если я хочу заполнить обе стороны?
- Должен ли я применить css дополнительно?
Я надеюсь, что содержимое почти заполнено в модальном
Если вы знаете хороший способ, пожалуйста,дайте мне знать
Спасибо
Спасибо, что сообщили мне о технологиях css, jquery или значениях атрибутов html или других системах сетки начальной загрузки, которые наполняют контент в модальном режиме.
Код:
<div class="modal-dialog modal-xl">
<div class="modal-content">
<h2 style="background-color:#00BFFF; padding:10px">할일 상세사항</h2>
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title"> todo : {{ object.title }}</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
{{ object.get_markdown_content | safe }}
<div class="container">
<div class="row">
<div class="col">
<!-- insert form area -->
<div class="card border-info mb-3" style="width:100%">
<div class="card-header" style="background-color:orange; color:white">
<a class="btn btn-outline-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
summer_note
</a>
<a class="btn btn-outline-primary" data-toggle="collapse" href="#collapseExample2" role="button" aria-expanded="false" aria-controls="collapseExample">
text_area
</a>
</div>
<div class="card-body">
<div class="comment_insert_area" style="background-color:white">
<div class="collapse" id="collapseExample">
<div class="card card-body">
<form method="post" action="{{object.get_absolute_url}}new_comment/summer_note" id="comment_form_summer_note" class="hi">
{% csrf_token %}
<div class="form-group">
{{ comment_form | safe }}
</div>
<hr>
<button type="submit" class="btn btn-primary btn-block" style="margin-right:20px;">Submit(summer_note)</button>
<br>
</form>
{{ form.media }}
</div>
</div>
<div class="collapse" id="collapseExample2">
<div class="card card-body">
<form method="post" action="{{object.get_absolute_url}}new_comment/text_area" id="comment_form_text_area" class="hi">
{% csrf_token %}
<div class="form-group">
{{ comment_form_text_area | crispy }}
</div>
<button type="submit" class="btn btn-primary float-right btn-block" style="margin-right:20px;">Submit</button>
<br>
</form>
{{ form.media }}
</div>
</div>
</div>
</div>
</div>
<!-- insert form area end -->
</div>
<div class="col">
<!-- CodeProcess area -->
<div class="card border-danger mb-3" style="max-width: 80rem;">
<div class="card-header" style="background-color:black; color:white">
<h4>Code Process</h4>
</div>
<div class="card-body">
{% for comment in comments_list_my.all %}
{% if comment.user_type == 1 %} <!-- 댓글 단 사람이 나일 경우 참고 -->
<table class="table table-bordered" id="comment_table_{{comment.id}}">
{% if comment.author == request.user %}
<tr bgcolor="#BFEFF2">
<td>
Step{{ forloop.counter }}
</td>
<td colspan="2">작성자 : <p style="color:blue;">{{comment.author}}</p></td>
</tr>
<tr>
<td bgcolor="#BFEFF2">Title</td>
<td colspan="3" bgcolor="#BFEFF2">
<span id="todo_comment_title_output_{{comment.id}}">
{{comment.title}}
</span>
<input type="text" class="form-control" name="" value="{{comment.title}}" id="todo_comment_title_{{comment.id}}" hidden>
</td>
</tr>
{% else %}
<tr bgcolor="#FFEC77">
<td>
Step{{ forloop.counter }}
</td>
<td colspan="2">작성자 : <p style="color:black;">{{comment.author}}</p></td>
</tr>
<tr bgcolor="#FFEC77">
<td >title</td>
<td colspan="3" >
<span id="todo_comment_title_output_{{comment.id}}">
{{comment.title}}
</span>
<input type="text" class="form-control" name="" value="{{comment.title}}" id="todo_comment_title_{{comment.id}}" hidden>
</td>
</tr>
{% endif %}
<tr>
<td>file_name</td>
<td colspan="3">
<span id="todo_comment_filename_output_{{comment.id}}">
{{comment.file_name}}
</span>
<input type="text" class="form-control" name="" value="{{comment.file_name}}" id="todo_comment_file_name_{{comment.id}}" hidden>
</td>
</tr>
<td>code</td>
<td colspan="3">
{% if comment.type.type_name == "summer_note" %}
<!-- summernote일 경우 -->
<span id="todo_comment_text_output_{{comment.id}}">
{{ comment.text | safe }}
</span>
<textarea name="name" rows="10" cols="110" id="my_code_{{comment.id}}" class="summer_for_comment_update_copy_{{comment.id}}" hidden>{{comment.text}}</textarea>
{% else %}
<!-- textarea일 경우 -->
<textarea name="name" rows="10" cols="110" id="{{comment.id}}" class="textarea_for_comment_update_{{comment.id}} form-control">{{comment.text}}</textarea>
<button type="button" name="button" id="{{comment.id}}" class="btn btn-sm btn-outline-danger copy_code">copy</button>
{% endif %}
</td>
</tr>
<tr>
<td></td>
<td colspan="2">
<button type="button" class="btn btn-sm btn-outline-primary" onclick=location.href='{{comment.id}}/update' id={{comment.id}}>update</button>
<!-- <button type="button" class="btn btn-sm btn-outline-primary updateTodoCommentButton" id={{comment.id}}>update2</button> -->
{% if comment.author == request.user %}
{% if comment.type.type_name == "summer_note" %}
<button class="btn btn-sm btn-outline-primary float-right comment_delete_button" id="{{comment.pk}}">delete</button>
<button class="btn btn-sm btn-outline-primary float-right comment_edit_complete_button_{{comment.pk}} comment_edit_complete_button_for_summernote" id="{{comment.pk}}" hidden>업데이트 완료(summernote)</button>
<button class="btn btn-sm btn-outline-primary float-right comment_edit_form_button comment_edit_form_button_{{comment.pk}}" id="{{comment.pk}}">edit_mode</button>
{% else %}
<button class="btn btn-sm btn-outline-primary float-right comment_delete_button" id="{{comment.pk}}">delete</button>
<button class="btn btn-sm btn-outline-primary float-right comment_edit_complete_button_{{comment.pk}} comment_edit_complete_button_for_text_area" id="{{comment.pk}}" >업데이트 textarea</button>
{% endif %}
{% endif %}
</td>
</tr>
<tr>
<td colspan="3" border="0"></td>
</tr>
</table>
<br>
{% else %}
{% endif %}
{% endfor %}
<div class="reply_list"></div>
</div>
</div>
<!-- CodeProcess area end -->
</div>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>