Problem with Bootstrap form

1

I have 2 form fields that are 2 input text. One does as a prefix of the name and the other is the name.

This is the look:

What you need is to remove the space between the first input text (the disabled one) and the second one, since the function of these two is that the first one serves as a prefix to the second.

I want to leave something like this:

It's all done with Bootstrap. My question is if there is any way to do it with Bootstrap.

My code:

<div class="row">
<div class="col-xs-3" id="hideDiv">
    <div class="form-group">
        <input id="prefijoAlmacen" type="text" id="general-text" name="general-text" class="form-control" value="" disabled />
        <span class="mensajeErrorNombre"></span>
    </div>
</div>
<div class="col-xs-4">
    <div class="form-group">
        <input id="modalNombre" type="text" id="general-text" name="general-text" class="form-control" value="" />
    </div>
</div>

<div class="col-sm-4">
    <div class="form-group">
    </div>
</div>

I tried to put another div row inside the column, but nothing; I tried to put the 2 inputs in it, but it does not work either ...

Any ideas?

Thank you.

    
asked by M. Giner 07.12.2017 в 08:13
source

1 answer

4

I see that you are using Bootstrap 3.x then you should create some help classes ( helper class ).

I created you 2:

  • To remove the padding from the left as soon as you have the class col-* :
  • div[class*='col-'].p-l-0 {
      padding-left: 0;
    }
    
  • To remove the padding from the right as soon as you have the class col-* :
  • div[class*='col-'].p-r-0 {
      padding-right: 0;
    }
    

    Let's see the classes in action:

    div[class*='col-'].p-l-0 {
      padding-left: 0;
    }
    
    div[class*='col-'].p-r-0 {
      padding-right: 0;
    }
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    
    
    <div class="row">
    <div class="col-xs-3 p-r-0" id="hideDiv">
        <div class="form-group">
            <input id="prefijoAlmacen" type="text" id="general-text" name="general-text" class="form-control" value="" disabled />
            <span class="mensajeErrorNombre"></span>
        </div>
    </div>
    <div class="col-xs-4 p-l-0">
        <div class="form-group">
            <input id="modalNombre" type="text" id="general-text" name="general-text" class="form-control" value="" />
        </div>
    </div>
    
    <div class="col-sm-4">
        <div class="form-group">
        </div>
    </div>

    Note: If you do not want this to be stuck, you simply create more classes with the desired paddings .

        
    answered by 07.12.2017 / 08:35
    source