如何在行布局和全宽度中组织我的按钮

Question

我想让我的两个div（向上和向下按钮）并排排列在一个布局行中，然后获取页面的全部内容。 现在，它们的组织方式如下：

我的HTML是这样的：

 <div layout="row">
    <div class="btn btn-info btn-lg" width="50%;">
        <span class="glyphicon glyphicon-menu-up"></span> Up
    </div>
    <div class="btn btn-info btn-lg" width="50%;">
        <span class="glyphicon glyphicon-menu-down"></span> Down
    </div>
</div>

Answer 1

如果您使用的是boostrap，可以按照以下方式进行：

<div class="row">
    <div class="col-md-6">

        <div class="btn btn-info btn-lg btn-full-width">
            <span class="glyphicon glyphicon-menu-up"></span> Up
        </div>

    </div>

        <div class="col-md-6">

            <div class="btn btn-info btn-lg btn-full-width">
                <span class="glyphicon glyphicon-menu-down"></span> Down
            </div>

    </div>


</div>

CSS：

.btn-full-width { width: 100%; }

编辑：为按钮添加了CSS类。

Answer 2

像这样的东西

＆＃13;

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div layout="row">
  <div class="col-xs-6">
    <div class="btn btn-block btn-info btn-lg">
      <span class="glyphicon glyphicon-menu-up"></span> Up
    </div>
  </div>
  <div class="col-xs-6">
    <div class="btn btn-block btn-info btn-lg">
      <span class="glyphicon glyphicon-menu-down"></span> Down
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;