在所有行上拉伸4个引导按钮

时间:2015-01-12 09:48:17

标签: html css twitter-bootstrap

<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个按钮。如何在所有行上拉伸此按钮? 目前看起来像是:enter image description here

我想要的是这样的: enter image description here

2 个答案:

答案 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>