Как создать отзывчивую строку в css?

Question

Я хочу нарисовать линию и убедиться, что линия изменится в соответствии с размером экрана, и точка линии всегда должна придерживаться абзаца. Что-то вроде этого:

Есть ли способ, чтобы добавить строку таким образом, это будет указывать на все время div? Я сделал небольшое исследование и обнаружил, что использование border-right: 1px solid #000000; используется для списка, как я могу сделать то же самое для div?

Это мой код:

.jumbotron { 
 
    /* background-color: #353535;*/ 
 
    /* background-image: url("https://unsplash.it/1440/736/?random");*/ 
 
    background-size: cover; 
 
    color: #fff; 
 
    /* padding: 155px 25px;*/ 
 
    padding-bottom: 200px; 
 
    font-family: Montserrat, sans-serif; 
 
}

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 

 
<div class="container"> 
 
    <div class="jumbotron text-center"> 
 
    <h1>company name </h1> 
 
    <div calss="line" style=" border-bottom: 5px solid #000000;"> 
 
     <div class="col-sm-6"> 
 
     <h2 class="usertype">For Businesses</h2> 
 
     <p> Authentication .</p> 
 
     <a href="#" class="btn btn-default">Try It Now</a> 
 
     </div> 
 
     <div class="col-sm-6"> 
 
     <h2 class="usertype">For Individuals</h2> 
 
     <p>For Google, Facebook, Coinbase .</p> 
 
     <a href="#" class="btn btn-default">Download App</a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

Вы можете использовать горизонтальное правило: "ч". Это отзывчиво.

Пожалуйста, обратитесь

How to draw lines through Bootstrap vertical dividers?

Answer 2

Вот в примере. Пожалуйста, посмотрите

* { 
 
    box-sizing: border-box; 
 
} 
 

 
body { 
 
    background: #fff; 
 
} 
 

 
.intro { 
 
    position: relative; 
 
} 
 

 
.main-heading:before { 
 
    width: 5px; 
 
    position: absolute; 
 
    left: 50%; 
 
    bottom: 0; 
 
    height: 20px; 
 
    background: #000; 
 
    content: ''; 
 
    transform: translate(-50%, 0); 
 
} 
 

 
.main-heading { 
 
    text-align: center; 
 
    font-size: 30px; 
 
    line-height: 30px; 
 
    position: relative; 
 
    padding-bottom: 25px; 
 
    border-bottom: 5px solid #000; 
 
} 
 

 
.two-col:after { 
 
    display: block; 
 
    clear: both; 
 
    content: ''; 
 
} 
 

 
.two-col .col { 
 
    float: left; 
 
    width: 50%; 
 
    position: relative; 
 
    padding: 0 20px; 
 
} 
 

 
.sub-heading { 
 
    position: relative; 
 
    display: inline-block; 
 
    padding: 20px 0; 
 
} 
 

 
.sub-heading:before { 
 
    width: 10px; 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 0; 
 
    height: 20px; 
 
    background: #000; 
 
    content: ''; 
 
    transform: translate(-50%, 0); 
 
} 
 

 
.sub-heading:after { 
 
    position: absolute; 
 
    background: #fff; 
 
    top: -5px; 
 
    left: -9999px; 
 
    content: ''; 
 
    right: 50%; 
 
    height: 25px; 
 
} 
 

 
.two-col .col:last-child { 
 
    text-align: right; 
 
} 
 

 
.two-col .col:last-child .sub-heading:after { 
 
    right: -9999px; 
 
    left: 50%; 
 
}

<div class="intro"> 
 
    <div class="main-heading">Company Name</div> 
 
    <div class="two-col"> 
 
    <div class="col"> 
 
     <div class="sub-heading">For Business</div> 
 
    </div> 
 
    <div class="col"> 
 
     <div class="sub-heading">For Individuals</div> 
 
    </div> 
 
    </div> 
 
</div>

здесь скрипку ссылка также https://jsfiddle.net/gafnk4rg/

Answer 3

Одно из возможных решений:

• Перемещение уровня линии один вниз.
• Заставьте его занимать только 50% от ширины и центрировать его (таким образом, он будет проходить от центра к центру обеих колонн).
• Добавить :before и :after, чтобы сделать вертикальные линии.
• Скрыть строку, когда в xs из-за стиля вашего меню, оно начинается с sm.

Вот пример (нажмите на кнопку "Полный страница", чтобы увидеть эффект):

.jumbotron { 
 
    background-size: cover; 
 
    color: #fff; 
 
    padding-bottom: 200px; 
 
    font-family: Montserrat, sans-serif; 
 
} 
 
.line { 
 
    border-bottom:4px solid #000000; 
 
    width:50%; 
 
    margin:auto auto; 
 
    position:relative; 
 
} 
 
.line:before { 
 
    content:""; 
 
    position:absolute; 
 
    top:-15px; 
 
    left:50%; 
 
    height:15px; 
 
    border-left:4px solid #000000; 
 
} 
 
.line:after { 
 
    content:""; 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
    border-left:4px solid #000000; 
 
    border-right:4px solid #000000; 
 
    width:100%; 
 
    height:20px; 
 
}

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 

 
<div class="container"> 
 
    <div class="jumbotron text-center"> 
 
    <h1>company name </h1> 
 
    <div> 
 
     <div class="line hidden-xs"></div> 
 
     <div class="col-sm-6"> 
 
     <h2 class="usertype">For Businesses</h2> 
 
     <p> Authentication .</p> 
 
     <a href="#" class="btn btn-default">Try It Now</a> 
 
     </div> 
 
     <div class="col-sm-6"> 
 
     <h2 class="usertype">For Individuals</h2> 
 
     <p>For Google, Facebook, Coinbase .</p> 
 
     <a href="#" class="btn btn-default">Download App</a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>