Question

我如何在bootstrap中实现此目的。我有一个3列，想在移动或桌面上保留3列。

<div class="container">
    <div>
        <h1>Example - 3 column div</h1>
        <div class="row">
          <div class="col-xs-6 col-sm-4">First</div>
          <div class="col-xs-6 col-sm-4">Second</div>
          <div class="col-xs-6 col-sm-4">Third</div>
        </div>
</div>

在桌面上

First | Second | Third

移动设备

就像这样

First | Second  
| Third

我希望在桌面和移动设备上实现这一目标

First | Second | Third

这是小提琴 - ＆gt; https://jsfiddle.net/y28ugzp6/

Answer 1

只需使用一个班级col-xs-4。

＆＃13;

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
    <div>
        <h1>Example - 3 column div</h1>
        <div class="row">
          <div class="col-xs-4 ">First</div>
          <div class="col-xs-4">Second</div>
          <div class="col-xs-4">Third</div>
        </div>
</div>

＆＃13;

Answer 2

将所有div的类设置为col-xs-4：

<div class="col-xs-4">First</div>
<div class="col-xs-4">Second</div>
<div class="col-xs-4">Third</div>

Answer 3

＆＃13;

<!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.1.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">
 
  <p>You can define it using md,sm and xs</p>
  <div class="row">
    <div class="col-md-4 col-sm-4 col-xs-4" style="background-color:lavender;">Java</div>
    <div class="col-md-4 col-sm-4 col-xs-4" style="background-color:lavenderblush;">PHP</div>
    <div class="col-md-4 col-sm-4 col-xs-4" style="background-color:lavender;">JQuery</div>
  </div>
</div>

</body>
</html>

＆＃13;

Answer 4

更好的是#Arkej。

但是你也可以这样做：

<div class="container">
        <div>
            <h1>Example - 3 column div</h1>
            <div class="row">
                <div class="col-xs-4 col-md-4 col-sm-4">First</div>
                <div class="col-xs-4 col-md-4 col-sm-4">Second</div>
                <div class="col-xs-4 col-md-4 col-sm-4">Third</div>
           </div>
        </div>
</div>

bootstrap 3列响应

4 个答案: