Question

我创建了一个带有以下列的引导容器（以及嵌套在另一列中的列）：

col-md-2
col-md-8
    col-md-4
    col-md-4
    col-md-4
col-md-2

当屏幕调整为较小的宽度时，较大列内的列最终会重叠。我在这些嵌入的列周围添加了一个边距，但它们仍然在水平方向上相互重叠。我想保持填充，甚至可能扩展它。

当屏幕扩展和缩小时，如何保持列中的内容不重叠？以下是该列的代码： https://jsbin.com/gowehatijo/edit?html,css

以下是完整视图（尝试慢慢扩展和缩小）： https://output.jsbin.com/gowehatijo

任何输入都将不胜感激。谢谢。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<body>


<br>
<br>
<div class="container-fluid">
  <div class="row" style="background-color: #bfbfbf">
    <div class="col-md-2"></div>


    <div class="col-md-8">
      <div class="container-fluid" style="min-height: 130px;">
        <div class="row" >
          <div class="col-md-4" align=center>
            <div>
              <button class="btn">test test test test</button>
            </div>    
          </div>

          <div class="col-md-4" align=center>
             <div>
              <button class="btn">test test test test</button>
            </div>
          </div>


          <div class="col-md-4" align=center>
             <div>
              <button class="btn">test test test test</button>
            </div>          
          </div>
        </div>
       </div>
    </div>

    <div class="col-md-2"></div>
  </div>
</div>


</body>
</html>

CSS

.btn {
  font-weight: bold;
  color: #FFFFFF;
  font-size: 20px;
  padding: 20px 60px;
  margin: 15px;
  text-decoration: none;
  background: rgba(0, 127, 255, .3);
  border: 2px black solid;

}

.btn:hover {

  background: rgba(0, 127, 255, 1);
  color: #FFFFFF;
}

Answer 1

您的问题不是布局本身，而是按钮宽度。

要解决此问题，请尝试设置此按钮的宽度，删除上一个按钮或仅设置

按钮规则

max-width:100%。

Answer 2

你使用所有填充物使按钮太宽。如果您需要块级按钮，请使用btn-block类来调整大小：

.btn, .btn-lg.btn-block.btn {
  font-weight: bold;
  color: #FFFFFF;
  text-decoration: none;
  background: rgba(0, 127, 255, .3);
  border: 2px black solid;
}

<button class="btn-lg btn-block btn">test test test test</button>

完整示例：

.btn, .btn-lg.btn-block.btn {
  font-weight: bold;
  color: #FFFFFF;
  text-decoration: none;
  background: rgba(0, 127, 255, .3);
  border: 2px black solid;
}

.btn:hover {

  background: rgba(0, 127, 255, 1);
  color: #FFFFFF;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<div class="container-fluid">
  <div class="row" style="background-color: #bfbfbf">
    <div class="col-md-2"></div>


    <div class="col-md-8">
      <div class="container-fluid" style="min-height: 130px;">
        <div class="row" >
          <div class="col-md-4" align=center>
            <div>
              <button class="btn-lg btn-block btn">test test test test</button>
            </div>    
          </div>

          <div class="col-md-4" align=center>
             <div>
              <button class="btn-lg btn-block btn">test test test test</button>
            </div>
          </div>


          <div class="col-md-4" align=center>
             <div>
              <button class="btn-lg btn-block btn">test test test test</button>
            </div>          
          </div>
        </div>
       </div>
    </div>

    <div class="col-md-2"></div>
  </div>
</div>

Answer 3

这是示例：https://jsfiddle.net/wpioneer/duq6agqd/

.btn {
  font-weight: bold;
  color: #FFFFFF;
  font-size: 20px;
  text-decoration: none;
  background: rgba(0, 127, 255, .3);
  border: 2px black solid;
}

.btn:hover {
  background: rgba(0, 127, 255, 1);
  color: #FFFFFF;
}

.btn-block {
  width: 100%;
  max-width: 340px;
  padding: 20px 0;
  margin: 15px 0;
}

<div class="container-fluid">
  <div class="row" style="background-color: #bfbfbf">
    <div class="col-md-2"></div>

    <div class="col-md-8">
      <div style="min-height: 130px;">
        <div class="row">
          <div class="col-md-4" align=center>
            <button class="btn btn-block">test test test test</button>
          </div>

          <div class="col-md-4" align=center>
            <button class="btn btn-block">test test test test</button>
          </div>

          <div class="col-md-4" align=center>
            <button class="btn btn-block">test test test test</button>
          </div>
        </div>
      </div>
    </div>

    <div class="col-md-2"></div>
  </div>
</div>

Bootstrap - 列重叠中的列

3 个答案: