boostrap col-auto taking up inordinate space-CodePudding

I'm having trouble understanding why col-auto is taking more space than the minimum required for its contents.

See this example

Why? What I want to happen is the last column is exactly the width of the button and the rest of the other columns expand to compensate.

My code is like:

<form>
  <div >
    <div >
      <input >
    </div>
    <div >
      <input >
    </div>
    <div >
      <input >
    </div>
    <div >
      <input >
    </div>
    <div >
      <button type="button" >X</button>
    </div>
  </div>
</form>

CodePudding user response：

Consider:

<form>
  <div >
    <div >
      <input >
    </div>
    <div >
      <input >
    </div>
    <div >
      <input >
    </div>
    <div >
      <input >
    </div>
    <div >
      <button type="button" >X</button>
    </div>
  </div>
</form>

With this, the two cols that were col-md-4 will stretch and the button col will shrink to the width of the button.