Question

我想在col-sm-4中移动元素，更多地朝向显示它的窗口的左侧，基本上我的元素是在移动视图中显示一半的圆环图 - 但是我认为如果我可以在col-xs-6元素内进行调整，以便正确显示。

这是一个示例代码，我们可以在col-sm-4框中移动对齐。？！

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <h1>Hello World!</h1>
  <p>Resize the browser window to see the effect.</p>
  <div class="row">
    <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
    <div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4</div>
    <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
  </div>
</div>

</body>
</html>

Answer 1

添加另一个班级...... 在css

.class1 {
 width:350px !important;
}

in html

<div class="col-sm-4  class1" style="background-color:lavender;">.col-sm-4</div>

Answer 2

您可以使用col-xs-6，因此在xs设备中获得50％

可以组合col断点：

<div class="container-fluid">
  <h1>Hello World!</h1>
  <p>Resize the browser window to see the effect.</p>
  <div class="row">
    <div class="col-xs-6 col-sm-4" style="background-color:lavender;">.col-sm-4</div>
    <div class="col-xs-6 col-sm-4" style="background-color:lavenderblush;">.col-sm-4</div>
    <div class="col-xs-12" style="background-color:lavender;">.col-sm-4</div>
  </div>
</div>

我可以调整元素，因为它是col-sm-6或col-sm-4的一部分吗？

2 个答案: