Question

Picture of what I am trying to accomplish

大家好，

我正在努力完成我提供的图片中的CSS位置。盒子的尺寸是600 W X 380 H.但是，我正在尝试使用jumbotron并且我已经覆盖了css，但结果并不是我想要的。 any1能帮助我做错的事吗？

* {
  max-width: 933px;
  margin: 0 auto;
}

.btn {
  border-radius: 0px;
}

/* Navigation */
.navbar .navbar-nav {
    display: inline-block;
    float: none;

}

.navbar {
    text-align: center;
    font-size: 10px;
    margin-bottom: -11px;
}

/* Navigation END */



.program-name-banner {
  background: red;
  text-align: center;
  font-weight:bold;
  margin: 8px 0px;
}

.btn.btn-center { 
  display:block; margin: 0 auto;
}


.border {
  border: 1px solid #eee;
  margin: 30px 50px;
}

.jumbotron {
  margin: 0px;
  height: 380px;
}


/* Main Story */
.main-story {
  margin: 108px 0 145.344px 340px;
}

.main-story .main-story-description {
  font-size: 13.33px;
}

.btn-font-size {
  font-size: 10.05px
}

/* Main Story END */

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class = "container-fluid border">

<nav class="navbar hidden-xs hidden-sm">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">LOREM IPSUN</a></li>
            <li><a href="#about">LOREM IPSUN</a></li>
            <li><a href="#contact">LOREM IPSUN</a></li>
            <li><a href="#contact">LOREM IPSUN</a></li>
            <li><a href="#contact">LOREM IPSUN</a></li>
          </ul>
</nav>
 
  <div class="jumbotron">
  <div class="main-story">
    <h2 class = "text-center">MAIN STORY TITLE<br/>GOES HERE</h2>
    <p class = "main-story-description text-center">Mauris commodo aliquam metus,quis fermentum arcu laculis vel. Phasellus nec leo ac sapien venenatis scelerisque. Nulla facilisi. Morbi ac tortor nec neque interdum hendrerit a et color</p>
    <button class = "btn btn-primary btn-center btn-font-size">CALL TO ACTION HERE</button>
  </div>
</div>
  
  <hr>
  
</div>

Answer 1

如果要将内部块垂直放置在中间并且水平向右对齐，请更改：

.row {
  overflow:hidden;
}

#extend-down {
    padding-bottom: 10000px;
    margin-bottom: -10000px;
}

小提琴：http://jsfiddle.net/fuat3d0z/1/

Answer 2

您可以将以下css用于.main-story类

margin: 28px 0 0px 0px;
float: right;
max-width: 240px;

在jsfiddle

上查看我的实时演示

Bootstrap Title CSS定位

2 个答案: