Question

我在一行中有7个按钮，当我展开视图时，它们总共只占据了一半的视图。

我希望按钮成一排并随视图扩展而扩展。

此外，“ offset-1”占用了太多空间，我希望更少。

此处的完整代码https://codepen.io/tarekhassab/pen/ZMajop?editors=1000

<div class='container'>
<button type="button"  value="" class='btn btn-primary'> All news </button>
<button type="button" value="Technology" class='offset-1 btn btn-primary'> Technology </button>
<button type="button"  value="Business" class='offset-1 btn btn-primary'> Business </button>
<button type="button"  value="Science" class='btn btn-primary'> Science </button>
<button type="button"  value="Entertainment" class='btn btn-primary'> Entertainment </button>
<button type="button"  value="Health" class='btn btn-primary'> Health </button>
<button type="button"  value="Sports" class='btn btn-primary'> Sports </button>
</div>

Answer 1

我通过添加text-center

解决了该问题

<div class='container text-center'>
<button type="button"  value="" class='btn btn-primary'> All news </button>
<button type="button" value="Technology" class='offset-1 btn btn-primary'> Technology </button>
<button type="button"  value="Business" class='offset-1 btn btn-primary'> Business </button>
<button type="button"  value="Science" class='btn btn-primary'> Science </button>
<button type="button"  value="Entertainment" class='btn btn-primary'> Entertainment </button>
<button type="button"  value="Health" class='btn btn-primary'> Health </button>
<button type="button"  value="Sports" class='btn btn-primary'> Sports </button>
</div>

展开视图时，引导按钮未排成一行

1 个答案: