输入类型文件中断导致水平滚动的容器（bootstrap 4 beta）

Question

我正在尝试创建两个6列div。第二个div的形式应该是4列并居中。一切正常，直到我将文件输入添加到表单。这会导致它从容器中分离出来并在底部添加一个水平滚动条。我读到改变输入{overflow：hidden;}的css会解决这个问题，但事实并非如此。我已经注释掉输入文件行，以便更容易找到它。有人可以告诉我如何防止文件输入在盒子外面打破。

<div class="container careers-container">
    <div class="row">
        <div class="col-12 col-sm-6 mx-auto mt-4">
           <h1 class='carbon cyan text-center'>Careers</h1>
           <div class="divider background-cyan"></div>
           <p class='salmon mt-4 font-24'>The Bridge is a premier pool hall providing an exceptional experience to it's clientele. We have the best tables, a great selection of drinks, good food options and lots of entertainment in a classy atmosphere. We are currently looking for people with service industry experience to serve at our Edmond location.</p>
           <div class="container">
               <div class="row">
                   <div class="col-12">
                       <h2 class='zaffre h5'>Currently Hiring</h2>
                   </div>
               </div>
               <div class="row no-gutters">
                   <div class="col-12 col-sm-4 d-none d-sm-block">
                       <img src="images/dart-board.jpg" class='img-fluid mb-3'></img>
                   </div>
                   <div class="col-12 col-sm-8">
                       <ul class='list-unstyled zaffre ml-3'>
                            <li>Bar Manager</li>
                            <li>Full time bartenders</li>
                            <li>Part time bartenders</li>
                            <li>Full or part time cooks</li>
                            <li>Part time cocktail waitress</li>
                       </ul>
                   </div>
               </div>
               <div class="row">
                   <div class="col-12 mb-3">
                     <span class='zaffre h6 font-24'>Please submit your resume here and we will contact you</span>  
                   </div>
               </div>
           </div>    
        </div>
        <div class="col-12 col-sm-4 mx-auto">
            <div class="background-cyan pt-3 pb-3 pl-1 pr-1">
               <form>
                    <div class="form-group row">
                        <label for="inputName" class="col-sm-2 col-form-label sr-only">Name</label>
                        <div class="col-12">
                            <input type="text" class="form-control" id="inputName" placeholder="Full Name">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="tel-input" class="col-sm-2 col-form-label sr-only">Telephone</label>
                        <div class="col-12">
                            <input class="form-control" type="tel" value="Phone Number" id="tel-input">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="inputEmail" class="col-sm-2 col-form-label sr-only">EMAIL</label>
                          <div class="col-12">
                            <input type="email" class="form-control" id="inputEmail" placeholder="Email">
                          </div>
                    </div>
                    <div class="form-group">
                             <label class='text-white' for="InputFile">Upload Resume</label>
    <!--                        <input type="file" class="form-control-file" id="InputFile"/>   -->
                    </div>
                    <div class="text-center">
                        <button type="submit" id='submit-btn' class="btn btn-sm btn-secondary mt-5 info-button">Submit Form</button>
                    </div>
                </form> 
            </div>
        </div>
    </div>
</div><!--End of container-->