如何在不更改bootstrap.css文件的情况下管理bootstrap列的宽度？

Question

I am trying to place my elements inside a bootstrap row (inside columns) to fit my needs, however, I faced with problems. The column width is 97px approx. for large screens. What should I do, to place inside such a column a control element (date picker or button) that oversizes the column width? The only options is to override standard bootstrap styles (generate new css) or merge several columns? What other options do I have?

        <div class="row">
        <div class="col-xs-1">
            <input type="checkbox" /> /* How han I change the margine between elements?*/
            <div class="arrow-down">
            </div>
        </div>
        <div class="col-sm-3">
            <!--- Date Time Picker control-->
        </div>
        <div class="col-xs-4">
            <div class="glyphicon glyphicon-time">7 h 49 min</div>
        </div>
        <div class="col-xs-2">
            <button type="button" class="btn btn-default btn-md btn-block">Add work time</button>
        </div>
        <div class="col-xs-2">
            <button type="button" class="btn btn-default btn-md btn-block">Add break</button>
        </div>
    </div>

Answer 1

您可以在指向自举程序CSS的链接之后的HTML标头部分的<style>中添加样式，或使用内联样式。