<div class="row">
<div class="col-md-6 col-sm-8 col-xs-12">
<a class="btn btn-default" id="lnkBtnSave" onclick=" GetSaveData(); ">Save</a>
<a class="btn btn-default" id="lnkBtnSubmit" onclick=" GetSubmitData(); ">Submit</a>
<asp:LinkButton class="btn btn-default" id="lnkBtnAttach" runat="server" OnClick="lnkBtnAttach_OnClick" Text="Attach" ></asp:LinkButton>
<asp:LinkButton class="btn btn-default" id="lnkBtnExit" runat="server" OnClick="lnkBtnExit_OnClick" Text="Exit"></asp:LinkButton>
</div>
</div>
我有4个按钮。如何在所有行上拉伸此按钮? 目前看起来像是:
我想要的是这样的:
答案 0 :(得分:2)
在每个部分周围添加一个div,并为其指定所需的尺寸。刚刚在我的网站上试过它,我在页面上有四个按钮。
<div class="row">
<div class="col-md-3 col-sm-3 col-xs-6 text-center">
<a class="btn btn-default" id="lnkBtnSave" onclick=" GetSaveData(); ">Save</a>
</div>
<div class="col-md-3 col-sm-3 col-xs-6 text-center">
<a class="btn btn-default" id="lnkBtnSubmit" onclick=" GetSubmitData(); ">Submit</a>
</div>
<div class="col-md-3 col-sm-3 col-xs-6 text-center">
<asp:LinkButton class="btn btn-default" id="lnkBtnAttach" runat="server" OnClick="lnkBtnAttach_OnClick" Text="Attach" ></asp:LinkButton>
</div>
<div class="col-md-3 col-sm-3 col-xs-6 text-center">
<asp:LinkButton class="btn btn-default" id="lnkBtnExit" runat="server" OnClick="lnkBtnExit_OnClick" Text="Exit"></asp:LinkButton>
</div>
</div>
答案 1 :(得分:0)
将.col-xs-3
div中的每个按钮换行并在这些div上应用text-align:center
:
.row > div {
text-align:center
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-xs-12">
<div class="col-xs-3">
<a class="btn btn-default" id="lnkBtnSave" onclick=" GetSaveData(); ">Save</a>
</div>
<div class="col-xs-3">
<a class="btn btn-default" id="lnkBtnSubmit" onclick=" GetSubmitData(); ">Submit</a>
</div>
<div class="col-xs-3">
<a class="btn btn-default" id="lnkBtnAttach" runat="server" OnClick="lnkBtnAttach_OnClick" Text="Attach" >Attach</a>
</div>
<div class="col-xs-3">
<a class="btn btn-default" id="lnkBtnExit" runat="server" OnClick="lnkBtnExit_OnClick" Text="Exit">Exit</a>
</div>
</div>
</div>