Bootstrap：边距中的按钮

Question

我正在尝试使用边距中的上一个和下一个按钮获得以下布局。

我觉得可能比我现在做的更干净。特别是我在按钮和标题/正文之间保持20像素的余量时遇到了问题。

这是一个小提琴https://jsfiddle.net/bb61c412/418/

代码：

＆＃13;

＆＃13;

#title {
  height: 30px;
  background-color: red;
}
#middle {
  margin-top: 30px;
  height: 100px;
  background-color: yellow;
}

＆＃13;

<link rel="stylesheet" type="text/css" href="https://bootswatch.com/bower_components/bootstrap/dist/css/bootstrap.min.css" />



<div class="col-sm-1" id="left">

  <button>Prev</button>

</div>
<div class="col-sm-10" id="title"></div>
<div class="col-sm-offset-1 col-sm-10 col-sm-offset-1" id="middle"></div>
<div class="col-sm-offset-11 col-sm-1 " id="right">
  <button>Next</button>
</div>




<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

＆＃13;

＆＃13;

＆＃13;

Answer 1

这样的东西？

＆＃13;

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-1">
      <input type="button" class="col-xs-1" />
    </div>
    <div class="col-sm-10 col-xs-12">
      Hello, Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, sint distinctio eaque rem non culpa pariatur quae harum ratione, dolore quos maxime fugit ducimus odit, ex iste voluptatem molestiae repellendus.
    </div>
    <div class="col-xs-12 col-sm-1">
      <input type="button" class="col-xs-1" />
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

你可以试试这个： 的 HTML：

<div class="row">
  <div class="col-sm-1" id="left">
    <button>Prev</button>
  </div>
  <div class="col-sm-10">
    <div id="title"></div>
    <div id="middle"></div>
  </div>
  <div class="col-sm-1 pull-right" id="right">
    <button>Next</button>
  </div>
</div>

<强> CSS：

#title{
  height:30px;
  background-color:red;
}

#middle{
  margin-top:30px;
  height:100px;
  background-color:yellow;
}

#left {
  margin-bottom: 10px; 
}

#right {
  clear: both;
  margin-top: 10px;
}