Configure modal with bootstrap

Navigation
2

I am using a modal I use bootstrap, however when I put inside a div to format the size, it appears strange to me. Follow the modal: 

<div class="modal fade" id="myModalTransportador" role="dialog">
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Transportador</h4>
                </div>
                <div class="form-group">
                    <div class="col-md-12">
                        <label asp-for="TransportadorID" class="col-md-6 control-label"></label>
                        <div class="col-md-4">
                            <input type="text" asp-for="TransportadorID" onkeypress="return BuscaDados1(event);" onblur="CarregaFornecedor1(this.value);" class="form-control" name="TransportadorID" id="idtransportador" />
                        </div>
                        <div class="col-md-1"> <th href="#" style="text-align:right"><a data-toggle="modal" data-target="#myModalPesquisaFornecedor" title="Pesquisar Transportador" class="btn btn-info"><i class="fa fa-search fa-lg"></i></a></th></div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-12">
                        <div class="col-md-12">
                            <label class="control-label" id="fornecedor1"></label>
                        </div>
                        <div class="col-md-12">
                            <label class="control-label" name="NomeTransportador" id="nomefornecedor1" ></label>
                        </div>
                        <div class="col-md-12">
                            <label class="control-label" name="EnderecoTransportador" id="ruafornecedor1"></label>
                        </div>
                        <div class="col-md-12">
                            <label class="control-label" name="CidadeTransportador" id="cidadefornecedor1"></label>
                            <label class="control-label" id="espaco"></label>
                            <label class="control-label" name="EstadoTransportador" id="estadofornecedor"></label>
                        </div>
                        <div class="col-md-12">
                            <label class="control-label" name="DocumentoTransportador" id="documentofornecedor"></label>
                        </div>
                        <div class="col-md-12">
                            <label class="control-label" name="InscEstadualTransportador" id="inscricaoestadual"></label>
                        </div>
                    </div>
                </div>
                <div class="col-md-12"><br /></div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success" data-dismiss="modal">Concluir</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
                </div>
            </div>
        </div>
    </div>

Itstaysthatway,withthislineinthemiddle,whenIuseclass="col-md-12" how can I fix it?

    
asked by anonymous 10.09.2018 / 14:19

2 answers

1

One way to adjust this is by putting a div class="row" after the form-group : 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<button class="btn"  data-toggle="modal" data-target="#myModalTransportador">Modal</button>

<div class="modal fade" id="myModalTransportador" role="dialog">
  <div class="modal-dialog">
      <!-- Modal content-->
      <div class="modal-content">
          <div class="modal-header">
             <h4 class="modal-title">Transportador</h4>
          </div>
                	
          <div class="form-group">
             <div class="row">
	              <div class="col-md-12">
	                  <label asp-for="TransportadorID" class="col-md-6 control-label">fgfgf</label>
	                  <div class="col-md-5">
	                     <input type="text" asp-for="TransportadorID" onkeypress="return BuscaDados1(event);" onblur="CarregaFornecedor1(this.value);" class="form-control" name="TransportadorID" id="idtransportador" />
	                  </div>
	                  <div class="col-md-1"> <th href="#" style="text-align:right"><a data-toggle="modal" data-target="#myModalPesquisaFornecedor" title="Pesquisar Transportador" class="btn btn-info"><i class="fa fa-search fa-lg">g</i></a></th></div>
	               </div>
             </div>
           </div>
           <div class="form-group">
             <div class="row">
	               <div class="col-md-12">
	                   <div class="col-md-12">
	                       <label class="control-label" id="fornecedor1"></label>
	                   </div>
	                   <div class="col-md-12">
	                       <label class="control-label" name="NomeTransportador" id="nomefornecedor1">Label</label>
	                   </div>
	                       <div class="col-md-12">
	                            <label class="control-label" name="EnderecoTransportador" id="ruafornecedor1">Label</label>
	                       </div>
	                       <div class="col-md-12">
	                            <label class="control-label" name="CidadeTransportador" id="cidadefornecedor1">Label</label>
	                            <label class="control-label" id="espaco">vbv</label>
	                            <label class="control-label" name="EstadoTransportador" id="estadofornecedor">Label</label>
	                        </div>
	                        <div class="col-md-12">
	                            <label class="control-label" name="DocumentoTransportador" id="documentofornecedor">Label</label>
	                        </div>
	                        <div class="col-md-12">
	                            <label class="control-label" name="InscEstadualTransportador" id="inscricaoestadual">Label</label>
	                        </div>
	                    </div>
	                </div>
                </div>
                <div class="col-md-12"><br /></div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success" data-dismiss="modal">Concluir</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
                </div>
            </div>
        </div>
    </div>
    
10.09.2018 / 14:57
1

What I think is happening and you're showing the html. And probably what you want is to show up when you want to show the message to the user. Try to put this in your div 

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

The relevant part and aria-hidden="true" if you want to keep it visible you do not need it. What I noticed also is that these lines is where the content of your modal should be. You probably have some tag off the site. I also checked now that you do not have <div class="modal-body"> , try to put everything inside the body and check if it already fits everything right If it does not work and can help you with anything else please let me know!

    
10.09.2018 / 14:33
CSS: nth-child (even) - Problems Div's overlapping on mobile