Question

请帮我从圆圈名称中间画一条线到IP Box。我尝试使用下面的一个......但是当我调整屏幕大小时，线条没有调整大小

<div class="row">
  <div class="col-md-12">
    <form role="form" class="">
       <div class="form-group">
           <div class="col-md-4"><div style=" width: 100px; height: 50px; padding: 0; margin: 0">
              <div style="width: 112px; height: 47px; border-bottom: 1px solid black; -webkit-transform:translateY(40px) translateX(25px) rotate(150deg); "/>
              </div>
          </div>
         <div class="col-md-4">
            <input type="text" class="form-control" id="inputHost1" value="IPBox" style="text-align:center;" disabled=""/>
         </div>
         <div class="col-md-4"></div>
      </div>
   </form>
 </div>
</div>
<div class="row">
  <div class="col-md-12">
    <div class="col-md-4" style="margin-top:40px;"><span class="circleBase type1">Name</span>
    </div>
    <div class="col-md-4"></div>
    <div class="col-md-4"></div>
  </div>

我尝试使用下面的一个..但是当我调整屏幕大小时，线条没有调整大小

这是css ..请检查靴子层.. / *这里使用的CSS将在bootstrap.css * /

之后应用

.circleBase {
  border-radius: 50%;
  behavior: url(PIE.htc); /* remove if you don't care about IE8 */
}

.type1 {
  width: 200px;
  height: 200px;
  border: 3px dotted blue;
  float: left;
    text-align: center;
    border-radius: 50%;
    line-height: 200px;
}
#inputHost1, #inputHost2{
text-align: center;
margin-top: 0!important;

}

Answer 1

           <div class="row">
                        <div class="col-md-12 col-lg-12 col-xs-4">
                            <!-- general form elements -->
                            <!-- form start -->
                            <form role="form" class="">
                                <div class="form-group">
                                  <div class="col-md-4"><div style=" width: 100px; height: 50px; padding: 0; margin: 0">
<div style="width: 112px; height: 47px; border-bottom: 1px solid black; webkit-transform:translateY(40px) translateX(25px) rotate(150deg);"></div>
</div></div>
                                    <div class="col-md-4 col-lg-4 col-xs-2">
                                        <input type="text" class="form-control" id="inputHost1" value="IPBox"
                                        style="text-align:center;" disabled=""/>
                                    </div>
                                    <div class="col-md-4 col-lg-4 col-xs-2"></div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="col-md-4" style="margin-top:40px;"><span class="circleBase type1">Name</span>
                            </div>
                            <div class="col-md-4"></div>
                            <div class="col-md-4"></div>
                        </div>
                    </div>

调整行引导程序的大小

1 个答案: