Question

使用bootstrap 3类的html and css learning项目的主页有3列。第一个包含文本和将文本复制到剪贴板的按钮。第二个和第三个具有链接。

我尝试使用以下代码进行配置。

这里是一个小提琴：https://jsfiddle.net/buhvm3o8/4/

html代码：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row-fluid">
    <div class="col-md-4">
      <div id="select_txt" class="alert alert-success">
        <strong>some text do copy</strong>

        <button class="btn btn-secondary btn-sm" type="button" onclick="copy_data(select_txt)" style="float: right;">
          <i class="glyphicon glyphicon-copy"></i>copy</button>
      </div>
    </div>
    <div class="col-md-4">
      <div class="alert alert-success">
        <a href="#">site1</a>
      </div>
    </div>
    <div class="col-md-4">
      <div class="alert alert-success">
        <a href="#">site2</a>
      </div>
    </div>
  </div>
</div>

css代码：

body {
  font-family: "roboto", monospace;
  height: 100%;
}

.alert-success {
  width: 100%;
  min-height: 100%;
  text-align: center;
}

我的问题是：

如何正确设置“ col-md-4”，使其成为一列，因为如下图所示，它作为一行。

now

如何将“ col-md-4”设置为所有人的屏幕高度。

expected

Answer 1

使用Bootstrap的Grid system来确保您的列始终是正确的宽度。现在，当屏幕尺寸低于中等尺寸时，它们的长度设置为12个单位，而如果尺寸更大，则设置为4个单位的长度。相反，您应该在班级上使用col-xs-4，以强制每个屏幕尺寸将其设置为4个单位。
最简单的方法是在CSS中使用vh单元。将一个类添加到有问题的列，并将高度设置为height: 100vh，该高度对应于视图高度的100％。

其他方法包括使用Flexbox强制页面宽度，或者总是麻烦100％高度属性。在大多数情况下，为了使100％的高度起作用，您将需要（a）all parents of the element to have their height set to 100%或（b）direct parent to have a statically defined height

Your fiddle with the updated values and the 100% height method

Answer 2

尝试为较小的屏幕添加xs断点：

body {
  font-family: "roboto", monospace;
  height: 100%;
}

.alert-success {
  width: 100%;
  min-height: 100%;
  text-align: center;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row-fluid">
    <div class="col-xs-4">
      <div id="select_txt" class="alert alert-success">
        <strong>some text to copy</strong>

        <button class="btn btn-secondary btn-sm" type="button" onclick="copy_data(select_txt)" style="float: right;">
          <i class="glyphicon glyphicon-copy"></i>copy</button>
      </div>
    </div>
    <div class="col-xs-4">
      <div class="alert alert-success">
        <a href="#">site1</a>
      </div>
    </div>
    <div class="col-xs-4">
      <div class="alert alert-success">
        <a href="#">site2</a>
      </div>
    </div>
  </div>
</div>

Answer 3

这是Bootstrap中列的预期行为！当设备的宽度变短时，它们会崩溃。尝试扩大小提琴的预览宽度，它会变成一列。这就是我们可以使用引导程序创建负责任的网站的方式。如果您想更深入地研究它，建议阅读bootstrap's grid system manual。例如，您可以使用column-md-4代替col-4，它会显示为一列，而与设备的宽度无关。
我建议阅读this question。 height在CSS中的工作方式与width略有不同，因此您需要在html或body标签上设置引用。
< / li>

有没有办法固定bootsrap3的警报成功类的css高度

3 个答案: