Question

我正在尝试让#bigimage和#textarea元素靠得更近，但在小屏幕上显示为col-12时仍然会居中。

我应该使用媒体查询吗？我已经尝试将它们放在一个单独的容器中，但是当我在一个小屏幕上测试时，会发生奇怪的事情。

以下我尝试的彩色边框是为了我自己的清晰度。我只是一个初学者，所以如果你对我的代码有任何其他意见，我真的很感激。

header {
  border: 3px solid red;
  text-align: center;
  margin-top: 30px;
}

li {
  display: inline;
  text-align: center;
  padding: 3%;
}

img {
  width: 300px;
}

ul {
  border: 2px solid green;
  margin-bottom: 20px;
  margin-top: 40px;
}

h2 {
  border: 2px solid yellow;
  margin-top: 30px;
}

#textarea {
  border: 3px solid green;
  text-align: justify;
  margin-top: 30px;
  width: 200px;
}

#bigimage {
  border: 3px solid green;
  text-align: center;
}

p {
  border: 2px solid red;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  width: 300px;
  margin: 0 auto;
}

#mainstuff {
  width: 50% margin: 0 auto;
  border: 3px solid yellow;
}

.container {
  border: 5px solid blue;
}

.row {
  margin-top: 30px;
  position: relative;
}

img {
  border: 2px solid red;
}

#textandphoto {
  width: 800px;
}

@media (min-width: 1500px) {
  .container {
    max-width: 900px;
  }
}

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-12">
      <header>
        <h1>Raphael Hetherington</h1>
        <h2>11+ Tutor</h2>
        <ul>
          <li><a href="">About Me</a></li>
          <li><a href="">11+ Tuition</a></li>
          <li><a href="">Programming</a></li>
          <li><a href="">Testimonials</a></li>
          <li><a href="">Contact</a></li>
        </ul>
      </header>
    </div>
  </div>
  <div class="row" id="mainstuff">
    <div class="col-12 col-md-6" id="bigimage">
      <img src="//lorempixel.com/400/200/abstract/5/" alt="">
    </div>
    <div class="col-12 col-md-6" id="textarea">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum omnis harum nesciunt repellendus laudantium quam quo ea, placeat, totam rem laboriosam vero, asperiores architecto. Dolores earum, architecto nemo molestiae quo. Lorem ipsum dolor sit
        amet, consectetur adipisicing elit. Corporis accusamus modi eaque placeat voluptates nihil quasi non et similique magnam architecto itaque nobis expedita amet, provident doloribus eveniet quis explicabo?</p>
    </div>
  </div>
</div>

Answer 1

cascade = CascadeType.DETACH

如何将这两个元素更紧密地结合在一起？

1 个答案: