Question

我有一个个人网站，最近我在左侧添加了一个轮播，右侧添加了文字。

因为我添加了轮播（以前只是静态照片），所以文本被推到了下一行。

这是我的代码：

 #profile{
        background-color:white;
        margin-top:30px;
        margin-bottom:10px;
    }

  #introduction{
        background-color:white;
        margin-top:50px;
    }
    .carousel-inner > .item > img {
      width:40%;
      height: auto;
      margin-top:70px;
      margin-right:30px;
      float:left;
    }

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
  
   <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.12/d3.min.js" type="text/javascript"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js" type="text/javascript"></script>
  
</head>

<body data-spy="scroll" data-target=".navbar-collapse">

  <div class="container" id="profile">
    <div class="device-md hidden-xs"> </div>
    <div class="col-md-12">
      <div class="container">
        <div class="col-md-6">
          <div id="carouselSlidesOnly" class="carousel slide" data-ride="carousel">
            <div class="carousel-inner">
              <div class="item active">
                <img class="d-block w-100" src="http://i.imgur.com/YsLpnLZ.png" alt="First slide">
              </div>
            </div>
            <div class="item">
              <img class="d-block w-100" src="http://i.imgur.com/YsLpnLZ.png" alt="Second slide">
            </div>
            <div class="item">
              <img class="d-block w-100" src="http://i.imgur.com/YsLpnLZ.png" alt="Third slide">
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-6" id="introduction">
        <p class="lead">Some lame text here </p>
      </div>
  </div>
  </div>

</body>

</html>

我知道Bootstrap具有12列的布局，因此我将轮播设置为6，文本设置为6。我做错了什么？

Answer 1

    1.do not use more than one container class.
    2.use row class to reserve a row and then use column class [2 of 6]. - optional
    3.main thing is you placed <div class="carousel-inner"> for only one item class.use it outside all item class

<!DOCTYPE html>
<head>
    <style>

        #profile{
            background-color:white;
            margin-top:30px;
            margin-bottom:10px;
        }

        #introduction{
            background-color:white;
            margin-top:50px;
        }
        .carousel-inner > .item > img {
            /*width:55%;*/
            height: auto;
            text-align: center;
        }

    </style>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>

<body data-spy="scroll" data-target=".navbar-collapse">

    <div class="container" id="profile">
        <div class="row">
            <div class="col-md-6">
                <div class="col-md-6">
                    <div id="carouselSlidesOnly" class="carousel slide" data-ride="carousel">
                        <div class="carousel-inner">
                            <div class="item active">
                                <img class="d-block w-100" src="http://i.imgur.com/YsLpnLZ.png" alt="First slide">
                            </div>
                            <div class="item">
                                <img class="d-block w-100" src="http://i.imgur.com/YsLpnLZ.png" alt="Second slide">
                            </div>
                            <div class="item">
                                <img class="d-block w-100" src="http://i.imgur.com/YsLpnLZ.png" alt="Third slide">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6" id="introduction">
                <p class="lead">Some lame text here </p>
            </div>

        </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.12/d3.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js" type="text/javascript"></script>

</body>

Boostrap 3.0两列布局

1 个答案: